我有一张用图表做的条形图.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栏上时,我需要同时显示两个工具提示.我怎样才能解决这个问题?

推荐答案

您应该根据Chart.js 2.9.4 documentation定义options.tooltips.mode: 'index'.

请查看下面经过修改的可运行代码,看看它是如何工作的.

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 dataset = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  datasets: [{
      label: "Target",
      data: target,
      backgroundColor: "#3d8ef8"
    },
    {
      label: "Realisasi",
      data: realisasi,
      backgroundColor: "#11c46e"
    },
  ],
}
new Chart('myChart', {
  type: 'bar',
  data: dataset,
  options: {
    tooltips: {
      mode: 'index',
      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, ',');
          }
        }
      }]
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

还可以考虑使用更新版本的图表.js,目前最稳定的版本是3.8.0.

Javascript相关问答推荐

有没有方法在Angular中的bowser选项卡之间移动HTML?

使用JavaScript更改json值顺序

React redux状态未在React-Router库中呈现

reaction如何在不使用符号的情况下允许多行返回?

Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

微软Edge Select 间隙鼠标退出问题

Snowflake JavaScript存储过程返回成功,尽管预期失败

Angular material 拖放堆叠的牌副,悬停时自动展开&

我的角模板订阅后不刷新'

PDF工具包阿拉伯字体的反转数字

在执行异步导入之前判断模块是否已导入()

为什么客户端没有收到来自服务器的响应消息?

Puppeteer上每页的useProxy返回的不是函数/构造函数

令牌JWT未过期

删除元素属性或样式属性的首选方法

将嵌套数组的元素乘以其深度,输出一个和

如何找到带有特定文本和测试ID的div?

本地损坏的Java脚本

未找到用于 Select 器的元素:in( puppeteer 师错误)