我正在尝试绘制折线图,该折线图应显示一条部分实线和部分虚线(以表示真实数据和预期数据)。 我发现这个例子在 2.0.0-alpha 版本上完美运行
var lineChartData = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: "My First dataset",
data: [1, 8, 3, 4, 2, 3, 4],
borderColor: '#66f',
borderDash: [20, 30],
pointBackgroundColor: "transparent"
},{
label: "My First dataset",
data: [1, 8, 3, 4, 2, , ],
borderColor: '#66f',
pointBackgroundColor: "transparent"
}]
};
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: lineChartData,
options: {
elements: {
line: {
fill: false
}
}
}
});
<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<canvas id="chart"/>
但是当我用当前的 2.1.3 版本运行相同的代码时,线条没有正确重叠(在点 D 和 E 之间):
var lineChartData = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: "My First dataset",
data: [1, 8, 3, 4, 2, 3, 4],
borderColor: '#66f',
borderDash: [20, 30],
pointBackgroundColor: "transparent"
},{
label: "My First dataset",
data: [1, 8, 3, 4, 2, , ],
borderColor: '#66f',
pointBackgroundColor: "transparent"
}]
};
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: lineChartData,
options: {
elements: {
line: {
fill: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="chart"/>
不幸的是,由于当前版本中已解决的其他错误,我无法使用 alpha 版本。 有什么方法可以用发布版本复制第一个片段中的图表?
最佳答案
一个解决方案可能是:在 dataset(1) 不可见时将其值设置为 null。 这条线不会创建贝塞尔曲线,这很不方便。
例子:
var lineChartData = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: "My First dataset",
data: [, , , , 2, 3, 4],
borderColor: '#66f',
borderDash: [20, 30],
pointBackgroundColor: "transparent"
},{
label: "My First dataset",
data: [1, 8, 3, 4, 2, , ],
borderColor: '#66f',
pointBackgroundColor: "transparent"
}]
};
关于javascript - Chart.js:带部分虚线的折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37390977/