Highcharts:半实线和半虚线的折线图？

Question

我试图在 highcharts 中显示时间序列线图 - 中心左侧是历史数据，因此线需要是实心的。中心右侧是预测数据，因此该线需要是点线或短划线。这可能吗？

谢谢!

Answer 1

是的，您可以，使用 zones 。区域允许您在同一系列数据中应用不同的样式，并且可以应用于 x 轴和 y 轴。

示例

1. Different colors by y-axis value

$(function() {
  $('#container').highcharts({
    series: [{
      data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
      zones: [{
        value: 0,
        color: '#f7a35c',
        style: 'dotted',
      }, {
        value: 10,
        color: '#7cb5ec'
      }, {
        color: '#90ed7d'
      }, ]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

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

Different dash styles by x-axis position

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Zone with dash style'
    },
    subtitle: {
      text: 'Dotted line typically signifies prognosis'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      zoneAxis: 'x',
      zones: [{
        value: 8
      }, {
        dashStyle: 'dot'
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>