当前位置: 首页 > 软件库 > iOS代码库 > 图表(Charting) >

BizCharts

基于 G2 封装的 React 图表库
授权协议 MIT
开发语言 JavaScript
所属分类 iOS代码库、 图表(Charting)
软件类型 开源软件
地区 国产
投 递 者 宋运锋
操作系统 跨平台
开源组织 阿里巴巴
适用人群 未知
 软件概览

BizCharts 是一个基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表;并且集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。

特性

  • 基于 G2、React

  • 健壮

  • 稳定

  • 强大的扩展能力

  • 高自定义能力

安装

通过 npm 引入

我们提供了 BizCharts npm 包,通过下面的命令即可完成安装

npm install bizcharts --save

成功安装完成之后,即可使用 import 或 require 进行引用。

快速开始

在 BizCharts 引入页面后,我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

  1. 创建容器

    在页面的 body 部分创建一个节点,指定一个 id

    <div id="mountNode"></div>
  2. 使用组件生成图表

    • 引入图表需要的组件

    • 用组件组装成需要的图表

    • 把图表渲染到 mountNode 节点上

import React from 'react';import ReactDOM from 'react-dom';import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 数据源const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];// 定义度量const cols = {  sold: { alias: '销售量' },  genre: { alias: '游戏种类' }
};// 渲染图表ReactDOM.render((
  <Chart width={600} height={400} data={data} scale={cols}>
      <Axis name="genre" />
      <Axis name="sold" />
      <Legend position="top" dy={-20} />
      <Tooltip />
      <Geom type="interval" position="genre*sold" color="genre" />
    </Chart>
), document.getElementById('mountNode'));

一张柱状图就绘制成功了:

体验改进计划说明

为了更好服务用户,G2 会将打点监控,将 URL 等信息发送回 AntV 服务器,BizCharts 没有关闭这个请求:https://kcart.alipay.com/web/bi.do

除了 URL 与 G2 版本信息外,不会收集任何其他信息,一切为了能对 G2 的运行情况有更多了解,以更好服务于用户。如有担心,可以通过下面的代码关闭:

// 关闭 G2 的体验改进计划打点请求(如:服务端渲染)BizCharts.track(false)

  • 一、百分比堆叠面积图(可设置Slider) 需求:         统计出x年下,人民年收入(收入:1万以下、1万-10万、10万-20万、20万以上)所占比例 要求:        使用堆叠面积图;保留小数点后两位小数 遇到问题:        后端接口返回x年各收入所占比例,四舍五入导致这些数据加起来后有时候会大于100% ,有时候会小于100%,而这又是合理的。小于100% 时,图表正常(异

  • 一、热力图-色块图组件封装          第一次热力图中的色块图时,差点被官网demo的数据格式吓退了。但是既然产品选择了,作为开发,只能尽最大努力来实现了。于是和同事讨论这个数据格式,照着官网处理后的数据格式,感觉每个数据都要给定具体的做标点才行,这!又一次觉得实现不了。好在没有放弃,继续做各种测试,最后恍然大悟,其实热力图的数据结构和普通的做柱状/折线图没啥区别。         时隔快一

  • Bizcharts是什么? 基于蚂蚁金服开发的可视化工具G2的React版本封装,使用体验更符合 React 技术栈的习惯,并且与 AntV 有着紧密的协同。 Bizcharts 地址:alibaba.github.io/BizCharts/ 如何使用Bizcharts? 安装BizCharts npm 包(建议使用淘宝镜像cnpm安装 npm install bizcharts --save

  • bizcharts 自定义设置Tooltip模板 <Tooltip crosshairs={{ type: 'y' }} useHtml htmlContent={( title, items

  • 基础折线图:          由点(point)和线(line)组成 封装:    数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色 注意:      bizcharts中单(柱状/折线)图默认不显示图例===》如果需要显示图例,需要自定义图例;代码使用TypeScript实现 代码: import React from 'react'; import { Chart, G

  • 一、基础饼图“分类”及不同分类后的封装 1.1分类        基础饼图表现形式一样,但是按照使用上的不同,基础饼图封装分为两类:组件(前端)计算所占百分比和接口(后端计算百分比)。区别如下:     组件计算百分比(百分比饼图):①、需要前端手动处理接口数据;②、需要处理保留到小数点后x位;③、各个item所占比例和最大限度接近100%;    接口返回百分比:①、直接使用接口数据(后端处理数

  • 一、需求描述 1、横坐标固定写死             横坐标固定8个,哪怕数据只有一个,但是鼠标悬浮时,没有数据的横坐标应该也没有tootip      实现思路:            没有数据的横坐标对应的值置为0=====》产品不同意=====》  没有数据的横坐标对应的值置为null====》解决问题    方法:             没有数据的横坐标对应值设置为null 2、默认

  • 一、需求      使用某图统计某学校最近几年人数变化情况,横坐标年份,纵坐标表示人数(所以,纵坐标人数不能出现小数) 二、实现思路     ①、此需求无论从哪里来说确实有必要;     ②、想要纵坐标不出现小数,那么必须得人为的控制纵坐标         设置坐标轴的几个参数:tickCount、ticks、tickInterval 、 max、  maxLimit……等(参考:https://

 相关资料
  • 本文向大家介绍基于jQuery的ajax方法封装,包括了基于jQuery的ajax方法封装的使用技巧和注意事项,需要的朋友参考一下 ajax (ajax开发)简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

  • 本文向大家介绍基于jQuery拖拽事件的封装,包括了基于jQuery拖拽事件的封装的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下 HTML代码: 封装的jQuery拖拽事件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 我正在尝试创建一个程序,询问用户他们想要显示哪个形状,然后根据该输入,它会询问形状的尺寸,然后在窗口中显示它。我现在正在研究第一个形状,它是正方形,但我似乎无法让它显示在窗口中。我在这里发布了我对正方形的类和我的主要方法。 我也试着放g2。画在主屏幕上,但它无法识别g2。我一直在为此出错。

  • 本文向大家介绍基于JDBC封装的BaseDao(实例代码),包括了基于JDBC封装的BaseDao(实例代码)的使用技巧和注意事项,需要的朋友参考一下 最近闲暇时萌发写一写dao的封装的例子,就将以前写的整理一下。 以上这篇基于JDBC封装的BaseDao(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 我有工作的spring基于web的应用程序。现在我想在另一个项目中重用它的部分。因此,我有两个问题: 推荐什么方法来打包可重用库这样的功能?内部包含应用程序上下文XML的JAR文件还是JAR+extra XML?还有别的吗? 如何将这样的库合并到另一个基于spring(Web)的项目(不同的命名空间包)中,从而使能够工作?我想类路径上的简单JAR是不够的--如何引用库的应用程序上下文等等?还需要采

  • 封装被定为义为“把一个或多个项目封闭在一个物理的或者逻辑的包中”。在面向对象程序设计方法论中,封装是为了防止对实现细节的访问。 抽象和封装是面向对象程序设计的相关特性。抽象允许相关信息可视化,封装使程序员实现所需级别的抽象。 封装使用访问修饰符来实现。一个访问修饰符定义了一个类成员的范围和可见性。C# 支持的访问修饰符如下所示: Public Private Protected Internal