HighCharts使用总结

1、常用属性

chart：
type:areaspline(线面图)、arearange（区间图）
zoomType: 缩放类型（沿着'xy'轴缩放）
alignTicks:设置坐标轴刻度对齐。当有多个坐标轴时，设置坐标轴刻度的对其方式（通过自动计算还是不需要计算）。

color: 'rgba(68, 170, 213, 0.1)' 颜色的透明色设置

style:CSS样式
设置文字颜色、字体、字号，但是字体的对齐则使用algin、x和y元素。比如： { "color": "#333333", "fontSize": "18px" }

Axis(x轴和y轴)：
type：轴类型（datetime，日期时间）
gridLineWidth：网格线的粗细
alternateGridColor：网格之间的过度填充色
plotBands：区间带（比如1.5至3.5之间是什么颜色）
tickInterval: 标记间隔（7 * 24 * 3600 * 1000, // 一周）
minRange:最小区间（14 * 24 * 3600000 // 14天）
opposite:是否对立面显示坐标轴，比如图表双轴的时候

plotOptions：用来设置所有数据序列的公共对象。
series.cursor：鼠标类型
series.point.events.：鼠标点事件
spline.pointInterval:3600000 点位间隔（毫秒，一小时）
area：设置图形区域的渐变颜色
pie.size:圆形图和环形图相对于图表区的大小，做小的“圆形图和环形图”的时候可以用到。
marker:数据的标记点

tooltip：提示窗（需要开启 enableMouseTracking: true）
valueSuffix：单位后缀
shared: true （多数据序列是否共享提示窗）
headerFormat: 提示框中标题行的HTML代码，默认值(<span style="font-size: 10px">{point.key}</span><br/>)。变量被花括号包起来。可用的变量有point.key, series.name, series.color和其它从点对象point和series 对象中的成员。
pointFormat:提示框中该点的HTML代码，默认值 <span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>.
footerFormat: 字符串形式定义提示框中的注脚格式。
useHTML:是否用HTML取代svg展示ToolTip标签。

labels小数点位数：

labels: {
format: '{y:.2f} %'( 没有Y值) {value:.4f} %（有Y值）
}

实例：tooltip: {
borderColor: '#0000AA',
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
//pointFormat: '<tr><td style="padding:0">{series.name}: </td>' +
//'<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>',
//footerFormat: '</table>',
//useHTML: true,
valueDecimals:2,
shared: true,
valueSuffix: 'kWh'
},

series：数据序列
dashStyle: 'shortdot' （虚线）
marker：数据标记点

legend:图例
layout：垂直图例还是水平图例
borderWidth：边框线
backgroundColor：背景颜色
align：水平位置
verticalAlign：垂直位置

设置标题不同的颜色样式：

var title_style = "<span style='color:#ff0'>Monthly</span> <span style='color:red'> Average Temperature </span>";

title: {
text: title_style,
x: -20, //center
useHTML:true,
},

2、HightChart

highchart脱离jquery独立使用

var chart = new Highcharts.Chart({

chart: {

renderTo: 'container'

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

series: [{

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}]

});

3、HighStock
上下多坐标轴： [{labels: {align: 'right',
x: -3
},
title: {
text: '温度(℃)'
},
height: '30%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '湿度（%）'
},
top: '35%',
height: '30%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '照度(Lux)'
},
top: '70%',
height: '30%',
offset: 0,
lineWidth: 2
}]

4、Highmap
实例地址：http://jsfiddle.net/tfxudL9z/3/
做世界地图等，可以使用内置的地图或GeoJSON，而自定义地图分为以下几个步骤。
（1）制作svg文件，可以使用“SVGDeveloper”。
（2）http://www.highcharts.com/studies/map-from-svg.htm#http://www.highcharts.com/maps/maps/test.svg 通过这个网址，将 svg文件转化为 highmap支持的json文件。
（3）用Highmap载入json文件，显示地图。

5、Treemap
数据节点父子关系，可以设置向下钻取也可以不设置。
allowDrillToNode：是否向下钻取

虽然还有其它很多图表插件，比如：echarts、fusioncharts、kcharts等。但是，还是感觉Highcharts的渲染效果比较好，看起来漂亮。有一点不好，就是灵活性大，官方的参考实例比较少，文档看英文有点费劲。

6、JS类库引用

modules 里面是扩展功能类库，已经引入highcharts.js，再开发maps、treemaps，只需引入map.js、treemap.js等。

"highstock.js"包含"highcharts.js" 的主要功能，同时在一个页面里面使用highstock和highcharts，只需要引入"highstock.js" 和 "highcharts-more.js"。

7、“load”和“redraw”事件重设数据点的宽度等（除了使用属性，还要使用回调函数修改属性不能修改的图表部分）

$('#container').highcharts({
chart: {

type: 'column',
events: {
load: function() {
var chart = this;
changeWidth(chart);
},
redraw: function() {
var chart = this;
changeWidth(chart);
}
}
}}

案例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

  <style>

    b{font-size: 25px;}

  </style>

</head>

<script src="jquery.min.js"></script>

<script src="highcharts.js"></script>

<script src="charttest.js?ver=1900"></script>

<body>

<h2> 设计图</h2>

<img src="chart.jpg" height="310" width="800">

<ul>

<li><h1>有哪些坑？？？和常规图表有哪些不同</h1></li>

  <li><b>1、一个数据点有两个label???</b></li>

  <li><b>2、colmn柱形图渐变而且每根柱子的透明度在增加</b></li>

  <li><b>3、x轴坐标左边线对齐，不是居中，也不是正对着线</b></li>

  <li><b>4、最后一根柱子是前面柱子宽度的两倍</b></li>

  <li><b>5、最后一根柱子后面分割线不见了</b></li>

  <p><h1>My god,这些基本配置搞不定了，怎么办？？？</h1>

  <img src="chartapi.jpg" height="1050" width="700">

  </p>

  <p><h1>答：可以使用图表的重绘回调函数，有那么好用吗？那么多图表元素渲染后都是些什么？ Highcharts并没有给出说明，怎么办？  猜！</h1>

  <img src="chartapi2.jpg" height="300" width="700">

  </p>

</ul>

<h2> 做出来的图表</h2>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

  <p><a href="博客地址">博客地址</a><a href="http://jsfiddle.net/starrycheng/dL6rebf5/19/">jsFiddle地址</a></p>

</body>

</html>

$(function() {

  var secondDataLabel = function(chart) { // on complete

      $('.secondDataLabel').remove();

      var points = chart.series[0].points,

        plotLeft = chart.plotLeft,

        plotHeight = chart.plotHeight,

        plotTop = chart.plotTop;

      Highcharts.each(points, function(p, i) {
　　　　　//设置渐变

        p.graphic.element.style.opacity = 0.1 + 0.05 * i;

        var element = p.graphic.element,

          width = element.width.animVal.value;

　　　　　　//设置最后一个柱子的宽度

        if (i === (points.length - 1)) {

          p.graphic.attr({

            width: width * 2 + 2

          });
　　　　　　//移动最后一个数据点dataLable的位置

          p.dataLabel.translate(parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding - p.dataLabel.width / 2, p.dataLabel.y);

          chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding, plotHeight + plotTop - 25)

            .attr({

              'text-anchor': 'middle',

              zIndex: 6

            })

            .css({

              color: '#697D91',

              fontSize: '14px'

            }).addClass('secondDataLabel')

            .add();

        } else {
　　　　　　//移动每个数据点的位置

          chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + (width / 2) - p.dataLabel.padding, plotHeight + plotTop - 25)

            .attr({

              'text-anchor': 'middle',

              zIndex: 6

            })

            .css({

              color: '#697D91',

              fontSize: '14px'

            }).addClass('secondDataLabel')

            .add();

        }

      });

    },
　　
　　//移动X坐标轴Label的位置

    positionLabels = function(chart) {

      var xAxis = chart.xAxis[0];

      xAxis.labelGroup.attr({

        'transform': 'translate(' + (-xAxis.slotWidth / 2) + ',-6)'

      });

    },

　　//删除最后两个格子线

    deleteGridElements = function(chart) {

      var xAxis = chart.xAxis[0],

        gridElements = xAxis.gridGroup.element.children;

      gridElements[gridElements.length - 2].remove();

      gridElements[gridElements.length - 2].remove();

    },
　　//删除x轴上最后两个刻度

    deleteTick = function() {

      var ticks = $('.highcharts-axis')[0].children;

      ticks[ticks.length - 4].remove();

    },

    loadOrRedrawChart = function(chart, load) {

      secondDataLabel(chart);

      positionLabels(chart);

    };

  $('#container').highcharts({

    chart: {

      events: {

        load: function() {

          loadOrRedrawChart(this);

          deleteTick();

          deleteGridElements(this);

        },

        redraw: function() {

          loadOrRedrawChart(this);

        }

      }

    },

    title: {

      text: null

    },

    legend: {

      enabled: false

    },

    tooltip: {

      enabled: false

    },

    plotOptions: {

      series: {

        pointPadding: 0,

        groupPadding: 0,

        borderWidth: 0,

        shadow: false

      },

      column: {

        dataLabels: {

          enabled: true,

          // format: '<span style="color:#FC7946;font-size:14px;">{point.y}</span><span style="color:#FC7946;font-size:10px;">%</span>',

          useHTML: true,

          format: '{y:.2f} %',

          style: {

            fontSize: '14px',

            color: '#FC7946'

          }

        },

        borderWidth: 0,

        color: {

          linearGradient: {

            x1: 0,

            x2: 0,

            y1: 0,

            y2: 1

          },

          stops: [

            [0, '#55ACEE'],

            [1, '#FFFFFF']

          ]

        },

      }

    },

    credits: {

      enabled: false

    },

    yAxis: {

      gridLineWidth: 0,

      max: 7,

      title: null,

      labels: {

        enabled: false

      }

    },

    xAxis: {

      max: 9,

      showLastLabel: false,

      gridLineColor: '#D8E2E9',

      gridLineDashStyle: 'shortdash',

      gridLineWidth: 1,

      categories: [

        '第1天',

        '第8天',

        '第14天',

        '第28天',

        '第61天',

        '第91天',

        '第112天',

        '第153天',

        '第183天',

      ],

      labels: {

        align: 'left',

        style: {

          color: '#9DACB6',

          fontSize: '12px',

        }

      }

    },

    series: [{

      type: 'column',

      name: '收益',

      data: [4.2, 4.4, 4.6, 4.8, 5.0, 5.2, 5.4, 5.6, 5.8]

    }]

  });

});

阶梯柱形图：http://jsfiddle.net/starrycheng/dL6rebf5/19/

空心饼图：

http://jsfiddle.net/starrycheng/pnh4ek94/6/

http://jsfiddle.net/6w9js32j/12/

$(function() {

//将标签扩展到Legend
(function(H) {
H.wrap(H.Legend.prototype, 'render', function(proceed) {
// Run original proceed method
proceed.apply(this, [].slice.call(arguments, 1));
// 绘制线
this.chart.renderer.path(['M', -10, 16, 'L', -10, -16 + this.legendHeight])
.attr({
'stroke-width': 1,
stroke: '#D8E2E9'
})
.add(this.group);

//绘制高
this.chart.renderer.label('高', -20, 10)
.css({
color: '#4595CA'
})
.attr({
fill: '#fff',
padding: 4,
r: 10,
zIndex: 6,
stroke: '#4595CA',
'stroke-width': 1
})
.add(this.group);

//绘制低
this.chart.renderer.label('低', -20, -30 + this.legendHeight)
.css({
color: '#F69279'
})
.attr({
fill: '#fff',
padding: 4,
r: 10,
zIndex: 6,
stroke: '#F69279',
'stroke-width': 1

})
.add(this.group);
});
}(Highcharts));

// let loadOrRedrawChart=(chart)=>{
// // let x=chart.legend.group.translateX;
// // let y=chart.legend.group.translateY;
// // let height=chart.legend.legendHeight;

// // chart.renderer.path(['M', x-26, y+16, 'L', x-26, y-16 + height])
// // .attr({
// // 'stroke-width': 1,
// // stroke: '#D8E2E9'
// // })
// // .add(this.group);

// // chart.renderer.label('高', x-13, y+8)
// // .css({
// // color: '#4595CA'
// // })
// // .attr({
// // fill: '#fff',
// // padding: 4,
// // r: 10,
// // zIndex: 6
// // })
// // .add();
// }

plotOptions: {
pie: {
borderWidth: 0,
innerSize: '65%',
allowPointSelect: false,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: true
},

series: [{
data: [
['A级', 10],
['B级', 20],
['C级', 20],
['D级', 20],
['E级', 20],
['F级', 15],
['G级', 5]
]
}]
});
});

HighCharts使用总结的更多相关文章

Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
Highcharts配置
一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...
highcharts .net导出服务和两种导出方式
highcharts 的Net导出服务 GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...
《Learning Highcharts》中文翻译
在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...
highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...
highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
highcharts使用笔记
1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...
FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
.net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

随机推荐

[转]jQuery 读取 xml
XML 文件内容: <?xml version="1.0" encoding="UTF-8"?> <stulist> <stude ...
[MVC 4] ActionResult 使用示例
在控制器 HomeController.cs 中使用以下代码 public ActionResult Contact() { ViewBag.Message = "Your contact ...
CentOS-7设置开机进入命令行界面（不进入图形界面）
[root@localhost ~]# systemctl get-default graphical.target [root@localhost ~]# systemctl set-default ...
关于phpmailer邮件发送
今天有个需求,要把phpmailer集成到框架里面所以我去官方下载了 phpmail5.2.6 地址在 https://github.com/PHPMailer/PHPMailer/releases ...
NodeJs通过async/await处理异步
##场景远古时代我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo ...
OpenCL 矢量存取
▶ 函数 vloadn 和 vstoren 来实现全局存储器和局部存储器之间的向量拷贝 ● 代码 #include <stdio.h> #include <stdlib.h> ...
ScheduledThreadPoolExecutor 线程池调度使用
package other; import java.util.concurrent.Callable; import java.util.concurrent.Executors; import j ...
迷你MVVM框架 avalonjs 学习教程9、类名操作
ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-a ...
Hadoop之MapReduce学习笔记（一）
主要内容:mapreduce整体工作机制介绍:wordcont的编写(map逻辑和 reduce逻辑)与提交集群运行:调度平台yarn的快速理解以及yarn集群的安装与启动. 1.mapreduce ...
js高级——构造函数，实例对象和原型对象——prototype、__proto__和constructor构造器
一.前言了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

HighCharts使用总结

HighCharts使用总结的更多相关文章

随机推荐

热门专题