使用Chart.js的虚线

是否可以使用Chart.js绘制虚线

这是我想做的一个例子：

我目前使用的选项不允许我做我的目标：

var lineChartData={
“数据集”：{
“标签”：“定义分数”，
“数据”：数据集[i]，
“pointStrokeColor”：“fff”，
“填充颜色”：“rgba（2200,0.5）”，
“点颜色”：“rgba（2201）”，
“strokeColor”：“rgba（2201）”，
pointHighlightFill:“#19283F”，
pointHighlightStroke:“28AFFA”，
贝塞尔曲线：假
},
“标签”：标签
};
var ctx=document.getElementById（“每周图表”）.getContext（“2d”）；
var myLine=新图表（ctx）.Line（lineChartData{
回答：是的，
scaleFontColor:#FF5972“，
贝塞尔曲线：假
});

使用Chart.js绘制虚线 可以扩展折线图类型来执行此操作

---

预览

---

脚本

Chart.types.Line.extend({
名称：“LineAlt”，
初始化：函数（数据）{
var strokeColors=[]；
data.datasets.forEach（函数（dataset，i）{
if（dataset.dottedFromLabel）{
strokeColors.push（dataset.strokeColor）；
dataset.strokeColor=“rgba（0,0,0,0）”
}
})
Chart.types.Line.prototype.initialize.apply（这是参数）；
var self=这个；
data.datasets.forEach（函数（dataset，i）{
if（dataset.dottedFromLabel）{
self.datasets[i].dottedFromIndex=data.labels.indexOf（dataset.dottedFromLabel）+1；
self.dataset[i]。\u保存={
strokeColor:strokeColors.shift（）
}
}
})
},
绘图：函数（）{
Chart.types.Line.prototype.draw.apply（这是参数）；
//来自Chart.js库代码
var hasValue=功能（项目）{
返回item.value！==null；
},
nextPoint=函数（点、集合、索引）{
return Chart.helpers.findNextWhere（集合、hasValue、索引）|点；
},
previousPoint=函数（点、集合、索引）{
返回图表.helpers.findPreviousWhere（集合、hasValue、索引）|点；
};
var ctx=this.chart.ctx；
var self=这个；
ctx.save（）；
this.datasets.forEach（函数（数据集）{
if（dataset.dottedFromIndex）{
ctx.lineWidth=self.options.datasetStrokeWidth；
ctx.strokeStyle=dataset.\u saved.strokeColor；
//改编自Chart.js库代码
var pointsWithValues=Chart.helpers.where（dataset.points，hasValue）；
图表.助手.每个（点，值，函数（点，索引）{
如果（索引>=dataset.dottedFromIndex）
ctx.setLineDash（[3,3]）；
其他的
ctx.setLineDash（[]）；
如果（索引==0）{
ctx.moveTo（点x，点y）；
}
否则{
if（self.options.bezierCurve）{
var previous=上一个点（点、点、值、索引）；
ctx.bezierCurveTo(
上一个.controlPoints.outer.x，
上一个.controlPoints.outer.y，
point.controlPoints.inner.x，
点，控制点，内部，y，
第x点，
点y
);
}
否则{
ctx.lineTo（点x，点y）；
}
}
ctx.stroke（）；
}，这个）；
}
})
ctx.restore（）；
}
});

然后

var数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
...
dottedFromLabel：“四月”
}
],
};
...
新图表（ctx）。线性图（数据）；

---

---

Fiddle-

代码可以工作，除了点开始于指定索引之前的一个索引。当我在JSFIDLE上测试它并将其更改为4月份时，点从3月份开始。发现错误并通过向索引

data.labels.indexOf（dataset.dottedFromLabel）+1添加一个点来修复偏移量问题

干杯！我刚刚批准了你的编辑并更新了小提琴。如果我们使用最新的chartjs库，这个dsnt就可以工作。2.3.0. 怎么了？