ChartJS 工具提示上的图表JS自定义消息,而不是x轴和y轴

rbl8hiat  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(170)

我正在显示一个条形图,其中包含三个不同的信息(项目名称、剩余天数和结束日期)。我在一个轴上显示项目名称,剩余天数决定条形图的高度。当前,当我将鼠标悬停在条形图上时,工具提示会显示x轴和y轴上已有的信息。我希望它具有结束日期。
即:项目“B”将在2天内结束(8月4日),当我将鼠标悬停在栏上时,我希望工具提示显示“End date of 2022-08-04”而不是“b Work Days Remaining:2英寸
我的json的数据看起来像这样:

[{"po_num": "a", "days_rem": 10, "date_end": "2022-08-16"}, 
{"po_num": "b", "days_rem": 2, "date_end": "2022-08-04"}, 
{"po_num": "c", "days_rem": 6, "date_end": "2022-08-10"}]

https://i.stack.imgur.com/HefRz.png这是我正在尝试做的事情的MS绘制渲染:https://i.stack.imgur.com/GAT2I.png
实现代码:

link = "{{{BASE_BACK_URL}}}";
        $.getJSON(link, function (data) {
            let po_names = [];
            let days_rem = [];
            for (let i = 0; i < data.length; i++) {
                po_names.push(data[i]["po_num"]);
                days_rem.push(data[i]["days_rem"]);
            }

            const ctx = document.getElementById('po-timeline-chart');
            const myChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: po_names,
                    datasets: [{
                        label: 'Work Days Remaining',
                        data: days_rem,
                        backgroundColor: 'rgb(0, 89, 178)'
                    }],
                },
                options: {
                    legend: {
                        align: "end"
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        });
dohp0rv5

dohp0rv51#

解决方案如下:

$.getJSON(link, function (data) {
      let po_names = [];
      let days_rem = [];
      for (let i = 0; i < data.length; i++) {
        po_names.push(data[i]["po_num"]);
        days_rem.push(data[i]["days_rem"]);
      }

      const ctx = document.getElementById("po-timeline-chart");
      const myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {
          labels: po_names,
          datasets: [
            {
              label: "Work Days Remaining",
              data: days_rem,
              backgroundColor: "rgb(0, 89, 178)",
            },
          ],
        },
        options: {
          tooltips: {
            enabled: true,
            callbacks: {
              // To change title in tooltip
              title: (data) => {
                return "This PO will run out on";
              },

              // To change label in tooltip
              label: (data) => {
                return date_end[data['index']];
              },
            },
          },
          legend: {
            align: "end",
          },
          scales: {
            xAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
          },
        },
      });
    });

相关问题