如何在highChart中的0位置绘制虚线垂直线

时间:2018-11-29 11:25:46

标签: highcharts chart.js

我希望虚线位于x轴上的0位置。我尝试了以下更改,但将其应用于条形边距。

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },

    legend: {
        symbolWidth: 80
    },

    plotOptions: {
        series: {
            color: '#000000'
        },
        value:0,
         dashStyle: 'Dot',
         padding:10
    },

    series: [{
        data: [1, 3, 2, 4, 5, 4, -6, 2, 3, 5, 6],
      
    }, {
        data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
       
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

1 个答案:

答案 0 :(得分:1)

您可以使用plotLines在轴上添加虚线。像这样:

yAxis: {
  plotLines: [{
    color: '#FF0000',
    value: 0,
      dashStyle: 'dot',
  width: 5
  }]
},

将其添加到yAxis中以创建垂直线:

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  legend: {
    symbolWidth: 80
  },

  plotOptions: {
    series: {
      color: '#000000',
    }

  },
  yAxis: {
    plotLines: [{
    color: '#FF0000',
      value: 0,
      dashStyle: 'dot',
      width: 5
    }]
  },

  series: [{
    data: [1, 3, 2, 4, 5, 4, -6, 2, 3, 5, 6],

  }, {
    data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],

  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>