使用Chart.js的虚线 [英] Dotted lines using Chart.js
本文介绍了使用Chart.js的虚线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以使用Chart.js绘制虚线?
Is it possible to draw dotted lines using Chart.js?
这是我想做的事的一个例子:
This is an example of what I want to do:
我正在使用的当前选项不允许我执行我打算做的事情:
The current options I'm using is not letting me do what I aim to do:
var lineChartData = {
"datasets": {
"label": "defi score",
"data": dataset[i],
"pointStrokeColor": "#fff",
"fillColor": "rgba(220,220,220,0.5)",
"pointColor": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,1)",
pointHighlightFill: "#19283F",
pointHighlightStroke: "#28AFFA",
bezierCurve: false
},
"labels": labels
};
var ctx = document.getElementById("chart_per_week").getContext("2d");
var myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
scaleFontColor: "#FF5972",
bezierCurve: false
});
推荐答案
使用Chart.js的虚线
您可以扩展折线图类型来做到这一点
Dotted Line using Chart.js
You can extend the line chart type to do this
预览
脚本
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
var strokeColors = [];
data.datasets.forEach(function (dataset, i) {
if (dataset.dottedFromLabel) {
strokeColors.push(dataset.strokeColor);
dataset.strokeColor = "rgba(0,0,0,0)"
}
})
Chart.types.Line.prototype.initialize.apply(this, arguments);
var self = this;
data.datasets.forEach(function (dataset, i) {
if (dataset.dottedFromLabel) {
self.datasets[i].dottedFromIndex = data.labels.indexOf(dataset.dottedFromLabel) + 1;
self.datasets[i]._saved = {
strokeColor: strokeColors.shift()
}
}
})
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// from Chart.js library code
var hasValue = function (item) {
return item.value !== null;
},
nextPoint = function (point, collection, index) {
return Chart.helpers.findNextWhere(collection, hasValue, index) || point;
},
previousPoint = function (point, collection, index) {
return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point;
};
var ctx = this.chart.ctx;
var self = this;
ctx.save();
this.datasets.forEach(function (dataset) {
if (dataset.dottedFromIndex) {
ctx.lineWidth = self.options.datasetStrokeWidth;
ctx.strokeStyle = dataset._saved.strokeColor;
// adapted from Chart.js library code
var pointsWithValues = Chart.helpers.where(dataset.points, hasValue);
Chart.helpers.each(pointsWithValues, function (point, index) {
if (index >= dataset.dottedFromIndex)
ctx.setLineDash([3, 3]);
else
ctx.setLineDash([]);
if (index === 0) {
ctx.moveTo(point.x, point.y);
}
else {
if (self.options.bezierCurve) {
var previous = previousPoint(point, pointsWithValues, index);
ctx.bezierCurveTo(
previous.controlPoints.outer.x,
previous.controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
}
else {
ctx.lineTo(point.x, point.y);
}
}
ctx.stroke();
}, this);
}
})
ctx.restore();
}
});
然后
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
...
dottedFromLabel: "April"
}
],
};
...
new Chart(ctx).LineAlt(data);
小提琴- https://jsfiddle.net/3gxjfndm/3/
这篇关于使用Chart.js的虚线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文