ChartJS - 移动的垂直线显示在工具提示的顶部
ChartJS - Moving vertical line is display on top of tooltip
您好,
我按照这个 post () 在我的图表上画了一条垂直线。
对于单个数据集,它工作得很好。
但对于多个数据集显示(在 y 轴上有堆叠选项),垂直线绘制在图表的工具提示上。
设置图表工具提示的 z-index 和垂直线都无法解决我的问题。因为我找不到任何 属性 来做到这一点。
你有什么idea/suggestion可以解决这个问题吗?
我正在使用 react-chart-js 2 和 chart-js ^2.9.4 作为对等依赖项。
您可以使用自定义插件,在绘制完所有数据集之后但在绘制工具提示之前进行绘制:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
stacked: true
}]
},
plugins: {
customLine: {
width: 5,
color: 'pink'
}
}
},
plugins: [{
id: 'customLine',
afterDatasetsDraw: (chart, x, opts) => {
const width = opts.width || 1;
const color = opts.color || 'black'
if (!chart.active || chart.active.length === 0) {
return;
}
const {
chartArea: {
top,
bottom
}
} = chart;
const xValue = chart.active[0]._model.x
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(xValue, top);
ctx.lineTo(xValue, bottom);
ctx.stroke();
}
}]
}
var 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/2.9.4/Chart.js"></script>
</body>
您好,
我按照这个 post (
对于单个数据集,它工作得很好。
但对于多个数据集显示(在 y 轴上有堆叠选项),垂直线绘制在图表的工具提示上。
设置图表工具提示的 z-index 和垂直线都无法解决我的问题。因为我找不到任何 属性 来做到这一点。
你有什么idea/suggestion可以解决这个问题吗?
我正在使用 react-chart-js 2 和 chart-js ^2.9.4 作为对等依赖项。
您可以使用自定义插件,在绘制完所有数据集之后但在绘制工具提示之前进行绘制:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
stacked: true
}]
},
plugins: {
customLine: {
width: 5,
color: 'pink'
}
}
},
plugins: [{
id: 'customLine',
afterDatasetsDraw: (chart, x, opts) => {
const width = opts.width || 1;
const color = opts.color || 'black'
if (!chart.active || chart.active.length === 0) {
return;
}
const {
chartArea: {
top,
bottom
}
} = chart;
const xValue = chart.active[0]._model.x
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(xValue, top);
ctx.lineTo(xValue, bottom);
ctx.stroke();
}
}]
}
var 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/2.9.4/Chart.js"></script>
</body>