原创 开发&源码 ·

HignCharts:线形图饼图绘制及时间等定制

最近.net项目需要做数据图形统计功能,于是引入了HignCharts;选择它主要是因为其开源,且无第三方库依赖。

HignCharts官网演示地址API

HignCharts图形.jpg

我们的产品中需要用到的有饼图和折线图:

首先引入js:

一、饼图

饼图.jpg

饼图的绘制比较简单:

这里定制的地方主要有几个,credits隐藏右下角标志,colors饼图各部分显示的颜色,tooltip的pointFormat用于定制悬浮窗口下半部分的文字,plotOptions的format用于将数据转换为百分比,series中数据部分,由于我是.NET开发,用的aspx和cs,数据传递使用<% =PieData %>

二、折线图

折线图.jpg

使用HignCharts后,折线图的绘制也很简单,但是,需要做一些个性化的修改

饼图重复的部分就不说了,除此之外,还有一些需要定制的:

  1. 首先,x轴是时间:于是我们设置xAxis: { type: 'datetime' 然后我们需要设置间隔是变化的,可能1天,可能3天。但是无论设置tickInterval或者step都无法达到预想的效果。于是只有自己在后台cs代码中计算并传递tickPositions: [<% =LineXTickPositions %>],(这里我们的需要是X轴最多10个)
  2. 然后需要设置x轴坐标的格式:

  1. plotOptions的series中设置pointStart开始时间,pointInterval: 24 * 3600 * 1000表示每个数据间隔一天
  2. 点击图上的点,弹出弹窗也定制:

  1. 上面有将时间格式化,Highcharts默认是utc时间,然后你们传入的不是utc时间,可能导致少了8个小时,则需要在Highcharts.chart('container_line', {设置前加上Highcharts.setOptions({ global: { useUTC: false } });

原文:简书ThinkinLiu 博客: IT老五

使用HighCharts确实很方便,除饼图和折线图以外,还有很多其他的图形样式可供选择,API也很全;不过,他是商业收费的,这点需要注意。

参与评论