我有一个像上面这样的图表。我只想要一个带有绿色边框的类别。例如，只有 x 轴 2235 带有绿色边框。 或者通过其他方式突出显示 2235 绿色。
由于我使用的是多条形图，因此我不知道如何将 borderColor 或 borderWidth 应用于数据集中的单个点。有任何想法吗？谢谢!
最佳答案
希望我的片段能对您有所帮助。
长话短说:我不知道如何仅使用配置来实现类似的结果，但在初始化后操作图表确实有魔力。
当您动态更改图表中的某些内容时，不要忘记 chart.update()。
干杯!
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script>
const context = document.getElementById("myChart").getContext('2d');
const chart = new Chart(context, {
type: 'bar',
data: {
labels: ["First", "Second", "Third"],
datasets: [{
label: "Red",
backgroundColor: "red",
borderColor: [],
borderWidth: 4,
data: [4, 3, 5]
},
{
label: "Green",
backgroundColor: "green",
borderColor: [],
borderWidth: 4,
data: [7, 2, 6]
},
{
label: "Blue",
backgroundColor: "blue",
borderColor: [],
borderWidth: 4,
data: [3, 7, 4]
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
const color = "yellow";
const indexOfBordered = 1;
chart.data.datasets.forEach(dataset => {
dataset.borderColor[indexOfBordered] = color;
});
chart.update();
</script>
</body>
</html>关于javascript - 在 Chart.js 多条形图中，有没有办法突出显示单个类别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53714411/