Highcharts工作笔记

我会带着你远行 2022-01-10 01:01 238阅读 0赞

最近做流量统计时用到一个highcharts组件，现在项目完成了，但我并没有深入研究它的配置，因为配置项实在太多了，我认为这些东西只需要会最基本的配置，至于其它，用到的时候再去查API就好了。这里简单记录下它的配置：  
  
**一、单个数据源时**

![SouthEast][]  
图1  
![SouthEast 1][]  
图2

如上图，配置如下： 
//绘制图表 
function drawLineChart(data) \{ 
        var xAxisArr = \[\], 
             yAxisArr = \[\]; 
         
        $.each(data,function(key,value)\{ 
            xAxisArr.push(key); 
            yAxisArr.push(value); 
        \}); 
         
        //计算x轴的步长 （当数据较多时，x轴会显示不下，所以需要间隔显示） 
        var xLen = xAxisArr.length, 
            maxLabelNum = 20, //x轴上最多显示的label个数，过多就会挤在一起 
            step = Math.round(xLen / maxLabelNum) < 1 ? 1 : Math.round(xLen / maxLabelNum); 
             
        chart = new Highcharts.Chart(\{ 
                chart: \{ 
                    renderTo: 'J\_Diagram',  //图表将要被渲染到哪个dom节点中 
                    type: 'line',  //线性显示 
                    marginRight: 100,  //图表距离右侧的距离,即上图中 "该月的流量"的显示宽度 
                    marginBottom: 50 //图表距离下方的距离,即上图中 x轴 label的显示高度, 刚开始label一直显示不全,有一半被隐藏了, 后来发现将这个值变大就可以了 
                \}, 
                title: \{ 
                    text: '' //图表的标题, 此为图1的设置,设为空串则不显示title, 如果不配置此项,此会显示默认的title,如图2所示 
                \}, 
                xAxis: \{ 
                    categories: xAxisArr, //x轴显示的label,如果不设置此项,则会显示默认的数字,即1,2,...n 
                    tickInterval: step,  //x轴上显示点的间隔,默认和y轴上的点的个数相同, 但这样会造成x轴过于密集 
                       labels: \{ 
                           style: \{ 
                               width: 'auto', 
                               height: 'auto' 
                           \}, 
                           rotation: -30, //x轴label逆时针旋转30度 
                          align: 'right' //, 
                         // step: step //x轴上label标签的间隔,即隔多少个点显示一个label,注意如果只设置此项则x轴上的点不会变,还是会每个都显示 
                                             //,当设置了tickInterval时此值可以不设, 会和tickInterval相同 
                       \} 
                \}, 
                yAxis: \{ 
                    title: \{ 
                        text: '单位：GB' 
                    \}, 
                    plotLines: \[\{ 
                        value: 0, 
                        width: 1, 
                        color: '\#808080' 
                    \}\] 
                \}, 
                credits: \{//图表右下角的水印，默认是highcharts.com,将其设为空串可以取消水印 
                        text: '', 
                        fontSize: '0' 
                \}, 
                tooltip: \{ //当鼠标移动图表上的某个点上时,显示的提示信息 
                    formatter: function() \{ 
                            return ''+ this.series.name +' '+ this.x +': '+ this.y +'GB'; 
                    \} 
                \}, 
                legend: \{ //图上 '该月的流量' 那部分的位置配置 
                    layout: 'vertical', 
                    align: 'right',    
                    verticalAlign: 'top', 
                    x: 10, 
                    y: 100, 
                    borderWidth: 0 
                \}, 
                series: \[\{ 
                    name: '该'+ (queryParams.showBy == 'month' ? '月' : '日') +'的流量',  //图上 '该月的流量' 那部分的文字配置 
                    data: yAxisArr 
                \}\], 
                plotOptions: \{ 
                    series:\{ 
                        marker: \{ //数据线上的点，默认不显示，当鼠标hover时才显示, 注意图1和图2中是enable设为true时的效果 
                            symbol: 'triangle-down', //点的样式, 可选的值有"circle", "square", "diamond", "triangle"和"triangle-down",默认是circle 
                            enabled: false, 
                            states: \{ 
                                hover: \{ 
                                    enabled: true 
                                \} 
                            \} 
                        \}                        
                    \} 
                \} 
            \}); 
    \} 
 
 
**一、多个数据源时**

![SouthEast 2][]  
图3

如上图,有多个数据需要显示时,配置如下,不再一一讲解,请对应单一数据源的讲解和官网API自己理解:

![SouthEast 4][]

**附3:**

Highcharts官网: [ http://www.highcharts.com/][http_www.highcharts.com]  
Highcharts API地址: [http://api.highcharts.com/highcharts][http_api.highcharts.com_highcharts]  
Highcharts demo: [http://www.highcharts.com/demo/][http_www.highcharts.com_demo]

[SouthEast]: /images/20220109/24fcc3dce572412aab4157fc7e806af2.png
[SouthEast 1]: /images/20220109/96269705547e4e619d5a62ab6898fd22.png
[SouthEast 2]: /images/20220109/8ae6db25db1b40a391035408948d601d.png
[SouthEast 3]: /images/20220109/ab23a029454c4b96820703e5f653acdb.png
[SouthEast 4]: /images/20220109/0a6c78bcfcb344498f606f97281ef8d5.png
[http_www.highcharts.com]: http://www.highcharts.com/
[http_api.highcharts.com_highcharts]: http://api.highcharts.com/highcharts
[http_www.highcharts.com_demo]: http://www.highcharts.com/demo/