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