如何在线型图中拥有实线以及虚线的高图

Question

我的reactjs项目使用的是折线图(highcharts)，要求2015年以后的数据，折线图应该显示为虚线，2015年以前的数据折线图应该显示为实线(没有虚线)。有什么办法可以实现这个要求吗？我查了一下highchart的文档，在series->data里面有一个叫做className的属性，但是不明白怎么做，有谁能帮帮我吗？

Answer 1

例子你有2个系列。一个系列是2015年以后的数据在第一个指数，2015年以前的数据在第二个指数。而你需要添加 "dashStyle "是由highcharts支持的，下面的示例代码将帮助你。

series: [
{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
},
{
    data: [6, 7, 8, 9, 10, 11, 6, 2, 24, 5, 9],
    dashStyle: 'solid' // or none dashStyle for 'solid' type
}
]

Answer 2

你可以使用 zones 功能来达到想要的效果。

演示。https:/jsfiddle.netghgetlibrarypurehighchartshighchartstreemastersampleshighchartsseriescolor-zones-dashstyle-dot。

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

API。https:/api.highcharts.comhighchartsseries.line.zone.value。