第二个数据集的工具提示不会显示chart.js

33qvvth1  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(191)

我用chart.js制作了一个条形图,它使用了两个数据集,标签是这样的。

<div><canvas id="myChart"></canvas></div>

图表的JS如下所示

const target = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
            const realisasi = [0, 0, 0, 0, 0, 10, 0, 10, 1, 0, 0, 0];
            const ctx = document.getElementById("myChart").getContext("2d"); 
            const dataset = {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [
                        { label: "Target", data: target, backgroundColor: "#3d8ef8" },
                        { label: "Realisasi", data: testArr, backgroundColor: "#11c46e" },
                    ],
                }       
            const myChart = new Chart(ctx, {
                type: 'bar',
                data: dataset,
                options: {
                    tooltips: {
                      callbacks: {
                            data (t, d) {
                                const xLabel = d.datasets[t.datasetIndex].label;
                                const yLabel = t.yLabel >= 1000 ? 'Rp.' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '$' + t.yLabel;
                                return xLabel + ': ' + yLabel;
                            }
                        }
                    },
                    scales: {
                        yAxes: [
                          {
                            ticks: {
                            beginAtZero: true,
                            callback: (label, index, labels) => {
                                    return 'Rp.' + label.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                            }
                          }
                        }
                      ]
                    },
                },
            });

然而,当我悬停在其中一个栏上时,realisasi的工具提示不会显示,它只显示目标的工具提示,同时我需要在悬停在目标栏或realisasi栏上时,使两个工具提示都显示。我该如何解决这个问题?

efzxgjgh

efzxgjgh1#

您应该根据Chart.js 2.9.4文档定义options.tooltips.mode: 'index'
请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个
还可以考虑使用较新版本的Chart.js,今天最新的稳定版本是3.8.0

相关问题