HighchartsJS建立點狀帶標識的圖表實例

上一篇我發佈的是關於 HighchartsJS建立環形帶標識的圖表實例， 從那篇文章就能夠看出 HighchartsJS 確實是一款功能很強大的圖表庫。利用它，咱們能夠在項目中建立出咱們所須要的圖表來統計數據，很方便，但首先是要熟悉它的API文檔；其次，在使用的過程當中，只須要了解熟悉它的API文檔還不夠，由於，它的文檔我的認爲介紹的還不夠詳細，須要經過網上查資料才能達到咱們的目的。

 

上圖只是其圖表的一部分，其餘的還有：柱狀圖、餅圖、散列圖、混合圖以及各類儀表圖等等，若有須要請自行去HighchartsJS官網查看。

如下是HighchartsJS建立點狀帶標識的圖表實例代碼：

效果圖：

引用（基於jq，jq和highcharts.js請自行去官網下載）：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>

HTML code:

<div id="chart" class="chart"></div>

CSS code:

<style>
*{margin:0;padding:0;}
.chart{width:800px;height:260px;}
</style>

JS code:

<script>
$(function() {
        Highcharts.setOptions({
            colors: ['#e60012']     //全局圖表顏色
        });
        
        var categories =  ['1日', '', '', '', '5日', '', '', '', '', '10日', '', '', '', '', '15日', '', '', '', '', '20日', '', '', '', '', '25日', '', '', '', '', '30日'];
        
        $('#chart').highcharts({//圖表展現容器，與div的id保持一致
            chart: {
                type: 'scatter', //指定圖表的類型，默認是折線圖（line）        
            },
            
            legend: {
                enabled: false   //圖例開關    設置爲false  則不顯示series中的name屬性
            },
            title: {
                useHTML: false,
                text: null
            },
            
            tooltip: {
                valueSuffix: '%',   //設置後綴
                backgroundColor: '#e60012',
                borderWidth: 0,
                borderColor: '#e60012',
                borderRadius: 5,
                style: {
                  color: '#fff',    //文字的顏色
                },
                shadow: false,                
                formatter: function () {
                    if((parseInt(this.x)+1)<10){
                        return '04-' + '0' +(parseInt(this.x)+1) + ' 5筆 ' + this.y + '%<br/>總收息：10,000,00元';
                        }else{
                            return '04-' + (parseInt(this.x)+1) + ' 5筆 ' + this.y + '%<br/>總收息：10,000,00元';
                            }
                },                
                crosshairs: [{        //十字準線
                      width: 1,
                      color: '#e60012'
                  }, {
                      width: 1,
                      color: '#e60012'
              }]                
            },    
                    
            subtitle: {                         //副標題
                text: null
            },
            
            xAxis: {     //指定x軸分組            
                title: {
                        text: '時間',     //不顯示y軸標題
                        style: {
                                color: '#b3b2b2',
                                fontSize:'10px'
                            }
                     },                                                  
                labels: {
                    formatter: function() {
                        return categories[this.value];
                    },
                    style: {
                        color: '#b3b2b2'    //設置刻度的顏色
                    }                    
                },            
                tickInterval:1,      //座標軸上的刻度線的單位間隔
                gridLineWidth: 1,
                gridLineColor: '#ede9e9',
                gridLineDashStyle: 'solid',        
                minPadding:0,
                tickWidth: 0,     //刻度線的寬度   設置爲0則刻度不會露頭
                lineColor:'#ede9e9',    //軸線的顏色
                lineWidth: 1,
                linkedTo: 0,     //設置爲0則刻度不會露頭
            },
            
            yAxis: {
                 title: {
                    text: '年化率',     //不顯示y軸標題
                    style: {
                            color: '#b3b2b2',
                            fontSize:'10px'
                        }
                 },
                 labels: {
                    format: '{value}%',
                    style: {
                        color: '#b3b2b2'
                    }
                 },               
                tickPositions: [8,9,10,11,12,13,14,15],    //y軸刻度
                gridLineWidth: 1,
                gridLineColor: '#ede9e9',
                gridLineDashStyle: 'solid',    
            },
            
            series: [                           //指定數據列
                {                    
                    name: '', //數據列名
                    data: [[null], [9], [11], [12], [15], [9], [null], [15], [14], [11], [13], [null], [9], [15], [11], [null], [11], [15], [13], [11], [12], [10], [null], [12], [9], [13], [11], [null], [10], [14]] //數據
                }, 
                { 
                    name: '', 
                    data:[[10], [12], [15], [14], [10], [8], [10], [null], [12], [10], [15], [11], [8], [14], [null], [null], [11], [15], [13], [11], [12], [10], [null], [12], [9], [13], [11], [null], [10], [14]],
                    marker: {
                        symbol: "circle"    //設置數據點的形狀
                        }
                },
            ],
            
            credits: {
                enabled:false,                    // 默認值，若是想去掉版權信息，設置爲false便可
            }            
        },function (c) {
                    chart = c;
                });
    });
</script>

點擊下載HighchartsJS建立點狀帶標識的圖表實例DEMO