将自定义标签作为数组传递给Chart JS工具提示

Question

我正在尝试在horzintalBar confiduration中使用chartsJS解析某些信息。

new Chart(document.getElementById("eventVisitors"), {
  type: "horizontalBar",
  data: {
    labels: ["monday", "Tuesday", "Wednesday", "Friday"],
    datasets: [
      {
        maxBarThickness: 1,
        label: "Visitors",
        backgroundColor: [
          "#D1E6E9",
          "#566573",
          "#201736",
          "#707B7C",
          "#4A235A"
        ],
        data: [5, 4, 6, 7]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: {
      display: false,
      text: "Visitor Origin"
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            drawBorder: true,
            display: false
          },
          ticks: {
            fontSize: 16,

            beginAtZero: true,
            callback: function(value) {
              if (value % 1 === 0) {
                return value;
              }
            }
          }
        }
      ],
      yAxes: [
        {
          gridLines: {
            drawBorder: true,
            display: false
          },
          ticks: {
            fontSize: 16
          }
        }
      ]
    }
  }
});

上面的方法效果很好，并按照需要绘制了图表。将鼠标悬停在每个栏中时，工具提示将显示：

星期一访客：5

但是，我需要能够使工具提示在另一个数组中查找，该数组将具有一些字符串，这些字符串与每个数据点相对应，以便显示出来，例如，

["Example Text display for Monday", "Tuesday Title", "Wednesday title"]

悬停时，工具提示将显示

星期一的示例文本显示星期一访客：5

我已经完成了有关图表js中回调的一些阅读，但不幸的是，我的javascript / jquery仅处于中等水平。任何帮助/指导将不胜感激。

Answer 1

而不是使用数组，我建议您改为使用一个对象（类似于地图行为），那样我认为它会更有意义。

const days = {
  Monday: "Example description for monday",
  Tuesday: "Example description for tueday",
  Wednesday: "Example description for wednesday",
  Thursday: "Example description for thursday",
  Friday: "Example description for friday",
  Saturday: "Example description for saturday",
  Sunday: "Example description for sunday"
};

在图表labels的options键中，可以使用Object.keys（）获取所有键作为标签。关键值是您的工具提示的描述。

data: {
  labels: Object.keys(days),
  datasets: [
    {
      maxBarThickness: 1,
      label: "Visitors",
      backgroundColor: [
        "#D1E6E9",
        "#566573",
        "#201736",
        "#707B7C",
        "#4A235A"
      ],
      data: [5, 4, 6, 7]
    }
  ]
},
...
tooltips: {
  callbacks: {
    beforeTitle: (tooltip) => {
      return days[tooltip[0].label];
    }
  }
}

一切都

new Chart(document.getElementById("eventVisitors"), {
  type: "horizontalBar",
  data: {
    labels: Object.keys(days),
    datasets: [
      {
        maxBarThickness: 1,
        label: "Visitors",
        backgroundColor: [
          "#D1E6E9",
          "#566573",
          "#201736",
          "#707B7C",
          "#4A235A"
        ],
        data: [5, 4, 6, 7]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: {
      display: false,
      text: "Visitor Origin"
    },
    tooltips: {
      callbacks: {
        beforeTitle: (tooltip) => {
          return days[tooltip[0].label];
        }
      }
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            drawBorder: true,
            display: false
          },
          ticks: {
            fontSize: 16,
            beginAtZero: true,
            callback: function(value) {
              if (value % 1 === 0) {
                return value;
              }
            }
          }
        }
      ],
      yAxes: [
        {
          gridLines: {
            drawBorder: true,
            display: false
          },
          ticks: {
            fontSize: 16
          }
        }
      ]
    }
  }
});