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

本文介绍了Highcharts：半实线和半虚线的折线图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图在高图中显示一个时间序列线图 - 中间的左侧是历史数据，因此该线需要坚实。中心的右侧是预测数据，因此该行需要虚线或虚线。这是可能的吗？ 谢谢！ 解决方案 ，使用区域。区域允许您在同一系列数据中应用不同的样式，并可应用于x轴和y轴。 示例 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> 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.ExamplesDifferent 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> 这篇关于Highcharts：半实线和半虚线的折线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！