hightCharts样式设置

hightCharts的API文档十分丰富，功能也十分强大，它是基于svg的，和echarts相比较而言各有千秋，echarts是基于canvas来做的。

hightCharts固然有着丰富的文档，可是新入手的人估计也会看的眼花缭乱，无从下手，今天就一点一点剖析它的文档，先从修改样式开始，能根据自己的需求

来完成设计图的还原。

1.删除官网标志credits: {        enabled: false }

2.给整个表格设置背景色        chart: {        backgroundColor: "#f4f5f7",  //设置背景色            type: 'spline'        }

3.图例修改位置及颜色       legend: {      //图例位置           align: 'center', //水平方向位置           verticalAlign: 'top', //垂直方向位置           x: 0, //距离x轴的距离           y: -10, //距离Y轴的距离           itemStyle: { //图例字体颜色                color: '#808080',                fontWeight: 'bold'           },           symbolHeight: 8,  //高度           symbolWidth: 22       }

4.图例样式       plotOptions: {  //设置图例样式            spline: {                marker: {                    fillColor: '#fe6000',//填充色            lineWidth: 2,  //线条宽度            radius: 4,    //半径宽度            lineColor: "#fe6000"  //线条颜色   symbol: 'diamond' //曲线点类型："circle", "square", "diamond", "triangle","triangle-down                }            }        }

5.设置折线颜色colors: ['#fe6000']  

6.设置表格的横纵线条gridLineColor: '#e4e5e7',  //设置网格线 gridLineWidth: 1,    //写在xAxis和yAxis下面   根据需要

7.设置坐标轴线lineColor: '#6398f9',//颜色lineWidth: 2,  //线条宽度   同样是写在xAxis和yAxis下面

8.设置坐标轴的刻度线tickWidth: 1, //设置刻度线tickColor: '#6398f9',

9.设置坐标轴上的字体颜色           labels: {                style: {                    color: '#222'//颜色                }            }

          xAxis: {            categories: ['一月', '二月', '三月', '四月', '五月', '六月',                         '七月', '八月', '九月', '十月', '十一月', '十二月'],            gridLineColor: '#e4e5e7',  //设置网格线            gridLineWidth: 1,            lineColor: '#6398f9',            lineWidth: 2,            tickWidth: 1, //设置刻度线            tickColor: '#6398f9',            labels: {                style: {                    color: '#222'//颜色                }            }        },

上述的这些基本上可以能根据自己的需求还原自己的设计稿了，先把样式做好，接下来再分享一下如何动态插入数据及一些交互。后续完善。