Highcharts：半实线和半虚线的折线图？ [英] Highcharts: Line graph with half solid line and half dotted line?

问题描述

我试图在高图中显示一个时间序列线图 - 中间的左侧是历史数据，因此该线需要坚实。中心的右侧是预测数据，因此该行需要虚线或虚线。这是可能的吗？

谢谢！

解决方案

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

示例

1. y轴值不同的颜色

<

  $（function（）{$（'＃container'）。highcharts（{series：[{data：[-10， - 5,10,15,10,10,5,0，-5]，区域：[{值：0，颜色：'＃颜色：'＃7cb5ec'}，{color：'＃90ed7d'}，]}]}）;}）;  

 <脚本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 =containerstyle =height：400px>< / div>  

2. x轴位置不同的破折号样式

$（function（） {$（'＃container'）。highcharts（{title：{text：'带破折号风格的区域}}，副标题：{text：'虚线通常表示预后'}，xAxis：{categories：['Jan'，'二月'，'三月'，'四月'，'五月'，'六月'， 7月，8月，9月，10月，11月，12月]}系列： 'zone'：'x'，zones：[{value：8}，{dashStyle：'dot'}]}]}）;}）; < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11。

I'm trying to show a time series line graph in highcharts - to the left of center is historical data, so the line needs to be solid. To the right of center is predicted data, so the line needs to be dotted or dashed. Is this possible?

Thanks!

解决方案

Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.

Examples

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>

2. 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>

这篇关于Highcharts：半实线和半虚线的折线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！