highchart图表 | 加基准线

最新推荐文章于 2021-04-21 16:35:52 发布

菜头

最新推荐文章于 2021-04-21 16:35:52 发布

阅读量3.7k

点赞数

分类专栏： highchart 文章标签： highchart

本文链接：https://blog.csdn.net/u011320740/article/details/79297865

版权

highchart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

加上如下代码即可：

plotLines:[{//基准线
            color:'#FF4040',
            dashStyle:'Dash',
            width:1.5,//基准线宽度
            value:5,//基准线的参考值
            zIndex:5
        }]

该代码加在xAxis里或者yAxis，xAxis则该基准线与y轴平行，yAxis则与x轴平行

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <script src="jquery-1.10.2.min.js"></script>
<script src="highcharts.js"></script>   
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
<script>  
  
// Create the chart  
$(function () {
    $('#container').highcharts({
    chart: {  
        type: 'column', 
    },  
    title: {  
        text: 'colum'  
    }, 
    xAxis: {  
        type: 'category',
        
    },  
    yAxis:{
        plotLines:[{//基准线
            color:'#FF4040',
            dashStyle:'Dash',
            width:1.5,
            value:5,
            zIndex:5
        }]
    },
    legend: {  
        enabled: false  
    },  
  
    plotOptions: {  
        series: {  
            borderWidth: 0,  
            dataLabels: {  
                enabled: true  
            },  
            events:{  
            click:function(e){//点击事件  
                  
                }  
             }    
        }  
          
    },  
  
    series: [{  
        name: 'Things',  
        colorByPoint: true,  
        data: [{  
            name: 'Animals',  
            y: 5
        
        }, {  
            name: 'Fruits',  
            y: 2 
        }, {  
            name: 'Cars',  
            y: 4  
        }]  
    }], 
  
    
})
})  
  
  
      
</script>

测试结果：

或者还有另一种基准线方式

加上如下代码即可，添加位置与上面一样：

plotBands: [{ //彩色带横跨绘图区，标志着轴间隔。
                    color: '#ccc',
                    from: 0,
                    to: 4
                }],

菜头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
highchart图表 | 加基准线

加上如下代码即可：plotLines:[{//基准线 color:'#FF4040', dashStyle:'Dash', width:1.5,//基准线宽度 value:5,//基准线的参考值 zIndex:5 }]该代码加在xAxis里或者yAxis，xAxi...
复制链接

扫一扫