ChartJS 将自定义标签作为数组传递到图表JS工具提示

gc0ot86w 于 2023-02-12 发布在 Chart.js

关注(0)|答案(1)|浏览(142)

我尝试在horizontalBar配置中使用Chart.js显示一些信息。

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人**

我读过一些关于Chart.js中回调的资料，但不幸的是我的JavaScript/jQuery只是中级水平。任何帮助/指导都将受到感谢。

chart.js

来源：https://stackoverflow.com/questions/58900027/pass-custom-labels-as-an-array-to-chart-js-tool-tip

1条答案

按热度按时间

xqkwcwgp1#

我建议你不要使用数组，而是使用一个对象（类似于map行为），这样我认为会更有意义。

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"
};

在图表options的labels键中，可以使用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 => days[tooltip[0].yLabel],
  },
},

一切都在一起

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"
};

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 => days[tooltip[0].yLabel],
      },
    },
    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
          },
        },
      ],
    },
  },
});

赞(0）回复(0）举报 2023-02-12

我来回答

ChartJS 将自定义标签作为数组传递到图表JS工具提示

1条答案

相关问题

热门标签

最新问答