highchart图表 | 加基准线

最新推荐文章于 2021-01-13 22:43:20 发布
最新推荐文章于 2021-01-13 22:43:20 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： highchart 文章标签： highchart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011320740/article/details/79297865
版权

加上如下代码即可：

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
                }],




菜 头
关注
专栏目录
highcharts带基线图表
06-25
highcharts带基线图表 diy by area charts
QChart折线图，添加标示线
01-20
动态随机生成折线图QLinseries，关键点用散点标记QScatterSeries，并在折线图中添加标示线，标示线通过继承QChartView，写mouseEvent实现。 debug的跑不了，可是试试release的。
关于highcharts的基准线
weixin_30707875的博客
07-05 661
今日工作中需要生成一张带有基准线的图表，我脑海里面第一个想法就是，既然是基准线，那我就在series里面多添加一条线就行了啊。于是我的series里面这样写： series:[ { name:'实际线', data:[300,545,166,454,154,163] }, { name:'基...
highcharts 高级应用—动态曲线的实现
java小强
06-08 317
第一次写那就来电简介吧，虽然都是废话：       Highcharts是一个制作图表的纯Javascript类库，　 　　主要特性如下： 　　兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 　　对个人用户完全免费； 　　纯JS，无BS； 　　支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 　　跨语言：不管是PHP、.net还是...
基准线_技巧146：如何为图表增加基准线
weixin_33478634的博客
01-13 1883
置顶公众号”Office成长课堂“和优秀的人一起成长，才能让自己更优秀我的Excel书，《Excel职场应用实战精粹》内容技巧分享。场景：为图表增加基准线的目的，是方便阅读现有数据与目标数据的差距在哪里，这是职场图表常用的一种辅助表达方式，增强图表的专业性与可读性，常利用辅助列产生“线条”或者“方块背景”搞定。操作：步骤1：在数据中添加两列辅助列，低基准线10000和高基准线20000-...
chart.js 入门&&highcharts 入门（推荐使用highcharts）
黄沙百战穿金甲，不破楼兰终不还。
05-20 8789
chart.js 参数说明 var lineChartData = { labels : ["09/12","09/13","09/14","09/15","09/16","09/17","09/18"], //X轴 坐标 datasets : [ { fillColor : "transparent", // 背景色
highchart图表加图标.rar_The Weather_highchart_highcharts
09-23
Use the highcharts foreground frame to draw a graph and display icons at each point of the curve. Effect such as weather forecast chart.
多个highchart图表导出（复制、下载）方法
04-25
在IT行业中，Highcharts是一个广泛使用的JavaScript库，用于创建交互式的柱状图、折线图、饼图等数据可视化图表。对于需要展示多个图表的情况，有时用户可能希望将这些图表一起导出或下载为单一的图像文件，以便于...
Highchart图表插件API详解
11-03
Highcharts是一款强大的JavaScript图表库，用于创建各类动态且交互式的图表，如柱形图、曲线图、饼图等。在本文中，我们将深入探讨Highcharts的API，了解如何使用其特性来定制和优化你的图表。 1. **画图组件...
highchart网页图表
07-07
Highcharts是一款广泛应用于网页图表开发的JavaScript库，它以其易用性、丰富的图表类型和出色的交互功能而受到开发者们的喜爱。这款库可以帮助开发者快速、高效地在网页上创建出美观且功能强大的数据可视化图表。 ...
web网页图表控件highchart示例
11-29
在“web网页图表控件highchart示例”中，我们将深入探讨Highcharts的基本用法、特性以及如何在实际项目中应用。 1. **安装与引入** 在HTML文件中，可以通过CDN链接或本地文件引入Highcharts的JS库。一般来说，引入...
HightChart标示线（plotLines）
scalad
09-13 4088
标示线数组是用标记来坐标轴上特殊值的，在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴。如果标示线同时定义在x轴和y轴，定义在y轴的标示线会显示在前面。具体实例如下： 1、在x轴上值为3的地方画一条红色的宽度为2px的线 xAxis: { // ... 省略代码 plotLines:[{ col
highcharts画阶梯图线（Step）阶跃信号之类
dusea的博客
10-10 2940
转自http://blog.sina.com.cn/s/blog_6a5359910101a3sk.html $(function () { $('#container').highcharts({ title: { text: 'Step line types, with null values in the series'
echarts添加多条辅助线（MarkLine）
热门推荐
夕降巫咸的博客
01-13 1万+
echarts添加多条辅助线
HighCharts：为plotLines基准线添加label标签不显示
KaiSarH
06-24 1032
解决hightcharts中为plotLines基准线添加label标签不显示
HighCharts：plotLines基准线与数据相差过大不显示
KaiSarH
06-17 1091
解决Highcharts中plotLines基准线与数据相差过大不显示
highchart复合图表
最新发布
06-02
Highcharts是一个用于制作交互式图表的JavaScript库，可以创建各种类型的图表，包括复合图表。 要创建一个复合图表，需要使用Highcharts的组合图表功能，该功能允许将多个图表组合在一起以显示多个数据系列。以下是一个创建复合图表的基本步骤： 1. 创建一个空的Highcharts图表对象。 2. 添加一个或多个数据系列，每个系列对应一个不同的图表类型，例如柱状图、折线图、面积图等。 3. 配置每个数据系列的选项，包括颜色、标签、线型等。 4. 配置图表的整体选项，例如标题、图例、坐标轴等。 5. 将图表渲染到HTML页面中。 下面是一个创建包含柱状图和折线图的复合图表的示例代码： ```javascript // 创建一个空的Highcharts图表对象 var chart = Highcharts.chart('container', { title: { text: '复合图表示例' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: [{ // 配置左侧Y轴 title: { text: '销售额' } }, { // 配置右侧Y轴 title: { text: '利润' }, opposite: true }], series: [{ // 添加第一个数据系列，使用柱状图 name: '销售额', type: 'column', yAxis: 0, data: [100, 200, 150, 250, 300, 200] }, { // 添加第二个数据系列，使用折线图 name: '利润', type: 'line', yAxis: 1, data: [50, 100, 80, 120, 150, 100] }] }); ``` 在上面的代码中，我们创建了一个包含柱状图和折线图的复合图表，其中左侧Y轴表示销售额，右侧Y轴表示利润。柱状图表示销售额，折线图表示利润。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值