我是新手。我想将折线图的最后一块（从2020/05/27到2020/05/29）显示为与图表其余部分颜色不同的虚线。简而言之，我想突出显示图表读数的最后一块，而不是其余的。 var ctx = document.getElementById('myChart').getContext('2d'); var data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55]; var myChart = new Chart(ctx, { type: 'line', data: { labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'], datasets: [{ label: 'Count', data: data_array, lineTension: 0, borderColor: [ 'rgba(255, 99, 132, 1)', ], borderWidth: 5 }] }, options: { scales: { yAxes: [{ ticks: { min: Math.round(Math.floor(Math.min.apply(this, data_array) - 50)/ 10) * 10, max: Math.round(Math.floor(Math.max.apply(this, data_array) + 50)/ 10) * 10 } }] } } });<!doctype html><html><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> <title>CodeWithHarry</title></head>
1 回答
潇湘沐
TA贡献1816条经验 获得超6个赞
插件核心 API 提供了一系列可用于执行自定义代码的挂钩。您可以使用钩子直接在画布上使用文本在不同数据点之间绘制不同样式的线条 画布呈现Context2D。beforeDraw
如果最后一个数据点的颜色也不同，则可以定义为数组。它应该包含每个值的条目，除了最后一个值之外，所有值都是相同的。这可以使用数组.map（） 完成，如下所示。dataset.borderColor
borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
请看下面的可运行代码片段。
const data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];
var myChart = new Chart('myChart', {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
data_array.forEach((value, index) => {
if (index > 0) {
var valueFrom = data_array[index - 1];
var xFrom = xAxis.getPixelForTick(index - 1);
var yFrom = yAxis.getPixelForValue(valueFrom);
var xTo = xAxis.getPixelForTick(index);
var yTo = yAxis.getPixelForValue(value);
ctx.lineWidth = 5;
if (index + 1 == data_array.length) {
ctx.setLineDash([5, 5]);
ctx.strokeStyle = 'rgb(0, 0, 255)';
} else {
ctx.strokeStyle = 'rgb(255, 99, 132)';
}
ctx.beginPath();
ctx.moveTo(xFrom, yFrom);
ctx.lineTo(xTo, yTo);
ctx.stroke();
}
});
ctx.restore();
}
}],
data: {
labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],
datasets: [{
label: 'Count',
data: data_array,
tension: 0,
showLine: false,
borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
borderWidth: 5
}]
},
options: {
animation: {
duration: 0
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
添加回答
举报
0/150
提交
取消