我有一个图表，所有的视觉点都被禁用了，我这样做:
const options = {
elements: {
point: {
radius: 0,
},
}
我的问题是，我实际上想有点启用仅为最后一个点，请参阅此图像:http://prntscr.com/1tq0zql
我找到了一种方法，通过使用片段来瞄准最后一行:
const data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
data: tgpDatasets,
borderColor: "rgba(103,120,137,1)",
borderWidth: 1,
segment: {
borderColor: ({ p0DataIndex, p1DataIndex }) => p0DataIndex === 8 && p1DataIndex === 9 && "red",
},
},
],
};
以上代码将使图表的最后一行变为红色，请参见此截图:http://prntscr.com/1tq155f
我的问题是，当半径从options对象而不是从dataset对象控制时，如何为图表的最后一个点启用点并设置其属性?
您可以使用如下脚本选项:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
}
]
},
options: {
elements: {
point: {
radius: (ctx) => (ctx.chart.data.datasets[ctx.datasetIndex].data.length - 1 === ctx.index ? 10 : 0)
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>