凹痕 - 使线条仅为图表的一部分

时间:2016-05-25 19:46:50

标签: d3.js charts linechart dimple.js

使用凹坑,如何通过点线线将折线图中最右边的数据点连接到前一个数据点,而折线图的其余部分仍然使用< em> solid line?

(想想最后一个未来预测的图表,或者最终数据点与其他数据点“不同”的任何情况。)

2 个答案:

答案 0 :(得分:1)

我不知道dimple.js。 Excel图表中使用的方法是绘制第二个数据系列,并让&#34;连接&#34;数据点重叠。

任何生成折线图的工具都应该采用类似的方法。

enter image description here

答案 1 :(得分:1)

我建议将您的数据拆分为&#34;真实&#34;数据和&#34;期望&#34; /&#34;预测&#34;数据,并为每个数据创建一个系列。

实际数据将包含除最右边的数据点之外的所有数据点。 预测数据仅包含最右边的两个点。

对于真实数据,照常绘制图表,并为预测数据创建包含自定义类的折线图,如下所示:Custom Classes

行类应如下所示:

.dotted-line {
    stroke-dasharray:"10,10";
}

在绘图之前插入自定义类作为axisLine的类:

 myChart.customClassList = {
      axisLine: 'dotted-line'
}

有关customClasses的更多信息,请访问here

虚线上的更多内容可以找到here