神灯神灯,我有一个愿望,

我不要金钱、权利;

也不要长生、不老。

我只想要遇到一个女孩,

陪她哭,陪她笑,陪她一起细水长流。

越了解,越喜欢;

越喜欢,越害怕。

你转身向北,

侧脸还是那么美,

我用眼光去追,竟听见你的泪。

置身在灯红酒绿的城市,

站在车水马龙的街道,

灯光的美,

夜晚的静,

更加衬托出了人们的寂寞。

从此故乡再无春秋,

从此青春再无当时。

你爱诗歌,我便学着写作;

你爱远方,我便离开故乡。

欢迎您,您是本站第 0 位访客, 累计已有 0 条评论

Let's Begin

实例demo之Highextend图表

文章导航

×
  1. 1. 实例展示
  2. 2. 使用文档
    1. 2.1. 公共配置项
    2. 2.2. 线图/柱状图配置项
    3. 2.3. 饼图配置项
    4. 2.4. 雷达图配置项
    5. 2.5. 正负对比图(bar)配置项
    6. 2.6. 混合图特有配置项


highextend图表实例view on github


highextend是基于highcharts进一步封装的图表组件,组件暴露一个Hxt的全局对象,它有以下一些方法来绘制不同类的图形,从此以后,画图只需简简单单的几行配置就ok了!赶紧点进来看看实例吧!

Hxt.line(elem, data, options); //渲染默认折线图
Hxt.spline(elem, data, options); //曲线图
Hxt.scatter(elem, data, options); //散点图
Hxt.bubble(elem, data, options); //bubble图
Hxt.column(elem, data, options); //柱状图
Hxt.bar(elem, data, options); //bar图,(横向柱状图)
Hxt.area(elem, data, options); //区域图(默认为平滑区域图)
Hxt.pie(elem, data, options); //圆饼图
Hxt.polar(elem, data, options); //雷达图
Hxt.pyramid(elem, data, options); //金字塔图
Hxt.mix(elem, data, options); //混合图

实例展示








使用文档

本页面的实例不全,读者可以在我的github上访问到这个项目的所有代码,然后down下来执行以下代码就能直接在浏览器看到所有实例。

npm install //安装依赖
gulp //启动服务

在上面介绍的方法中,有elem, data, options三个参数,下面依次介绍以下:

  • elem:绘制图表元素的id。
  • data:图表的数据。
  • options:图表配置项,可以为空,为空则使用默认配置。

公共配置项

  • emptyHtml: 数据为空时的提示信息,支持html格式。
  • backgroundColor: 图表背景颜色,默认为’白色’。
  • marginTop: 图形的上边距,例如 marginTop: 60。
  • marginRight: 图形的上边距,例如 marginRight: 60。
  • chartLoad: 设置图形加载方式。一般实时动态数据会配置此项。
  • colors: 颜色,类型为数组。非必选,有默认的颜色。
  • title: 图表标题,默认为空。
  • subtitle: 副标题,默认为空。
  • markerEnabled: 是否显示线条上的点,默认true为显示。
  • markerSymbol: 线条上点的形状,默认为’circle’圆形,并且默认样式为空心。其他值有’square’,’diamond’,’triangle’等。
  • legendEnabled: 图例是否显示,默认为true,显示图例。
  • legendLayout: 图例显示方式,默认为水平方向:’horizontal’。 ‘vertical’为垂直方向。
  • legendAlign: 水平方向显示位置,默认中间位置:’center’,其他值有’right’,’left’。
  • legendVerticalAlign: 垂直方向显示位置,默认’bottom’,其他值有’top’,’middle’。
  • legendItemMarginBottom: 每个图例的下边距,默认为4px。
  • shared: tooltip提示框是否被共享。默认为false
  • valuePrefix: tooltip悬浮框value值前面的字符,默认为空。
  • valueSuffix: tooltip悬浮框value值后面的字符,默认为空。
  • xDateFormat: tooltip中时间转化格式,默认为’%Y-%m-%d’,即’2016-01-10’。
  • chartLabel: 图形中的提示文案,格式为对象,如:{html:’title’, style:{left:’30px’, top: ‘5px’}}。

线图/柱状图配置项

  • Xtype: 横坐标类型,默认为空。如设置'datetime',则为时间类型,默认转为'01-01'格式
  • Ytitle: 纵坐标标题,默认为空。
  • Ytype: 纵坐标类型,默认为空。如设置'rate',则用1024为单位计算,且默认单位为'kb',大于1024单位变为'M'

饼图配置项

  • size: 饼图的整体大小(百分比),默认为100%。
  • innerSize: 内圆所占的百分比,默认为55%。
  • showInLegend: 设置圆饼图的图例是否显示,默认为true
  • startAngle: 圆饼图的开始角度。
  • endAngle: 圆饼图的结束角度。
  • pieLabel: 设置圆饼图的series文案,默认为数量
  • pieClick: 圆饼图的点击事件。
  • pieMouseOut: 圆饼图的mouseout事件。
  • pieMouseOver: 圆饼图的mouseover事件。

雷达图配置项

  • polarType: 雷达图的形状,可设置为’circle’-圆形,默认为’polygon’-菱形。
  • polarSize: 雷达图大小百分比,默认95%。

正负对比图(bar)配置项

  • barStacking: 设置为”normal”-表示正负对比图。

混合图特有配置项

  • mixPieCenter: 混合图中饼图的特有设置–中心原点坐标,如[100,50]。
  • mixPieSize: 混合图中饼图的特有设置–饼图大小,默认为’60%’。
  • mixPieInnerSize: 混合图中饼图的特有设置–饼图空心圆大小,默认为0。
  • miePieShowInLegend: 混合图中饼图的特有设置–是否显示legend,默认为false。

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持