Chart.js 自定义工具提示标签

Question

我有一个折线图，其中当前设置了数据，但我需要为光标位于该点上时显示的框制作自定义标签。 我收到一个带有 3 个键的对象发送到我的图表，每个键代表一个数组，实际上这就是数组：

{"labels":["March","April","May","June","July","August"],
"subscriptions":[{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1,"1x java ditor 1 (seanca)":1},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":7,"1x java ditor 1 (seanca)":2},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":6,"1x java ditor 1 (seanca)":21},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1,"1x java ditor 1 (seanca)":3},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1},{"1x java ditor 1 (seanca)":4,"3x java mujor 12 (seanca)":2}],
"quantity":[3,10,28,5,2,6]}

我已将 data.quantity 发送到数据集的数据，将 data.labels 发送到数据集的标签。 对于 data.subscriptions，我已将其发送到悬停时显示的标签的工具提示。 代码写在下面。 这些标签出现，但我想将它们列在彼此下面，但是“ “在这部分不起作用。 有什么我应该添加的东西才能使它成为可能吗？

function generateMonthFrequentationsLinearChart(data) {
    let monthLineChartData = {
        labels: data.labels,
        datasets: [{
            label: "# abonime",
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1,
            data: data.quantity
        }],
        tooltipText: data.subscriptions,
    };

    let ctxL = $('#lineChart');
    monthFrequentationLineChart = new Chart(ctxL, {
        type: 'line',
        data: monthLineChartData,
        options: {
            responsive: true,
            legend: {
                display: true,
            },
            title: {
                display: true,
                text: 'Line Chart'
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        var array = data.tooltipText[tooltipItem.index];
                        var label = "";
                        for (var text in array){
                            label += text + ": " + array[text] + '\n |';
                        }
                        label = label.slice(0, -1);
                        return label;
                    },
                    title: function (context, tooltipItem) {
                        return  context[0].xLabel + "  Total: " + context[0].yLabel;
                    }
                },
                displayColors: false,
                hasIndicator: true,
                intersect: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

我已经为工具提示完成了这段代码，我得到了数据，但它们没有出现在列表中

tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        var array = data.tooltipText[tooltipItem.index];
                        var label = "";
                        for (var text in array){
                            label += text + ": " + array[text] + '\n |';
                        }
                        label = label.slice(0, -1);
                        return label;
                    },
                    title: function (context, tooltipItem) {
                        return  context[0].xLabel + "  Total: " + context[0].yLabel;
                    }
                },
                displayColors: false,
                hasIndicator: true,
                intersect: false
            }

它们看起来像这样： 3x java 6 mujor 123123 (seanca) :1 |3x java mujor 12 (seanca) :1 |1x java ditor 1 (seanca):1 作为一行。

Answer 1

您可以在这里做的是，您可以构建数组并简单地返回它，而不是构建标签字符串。 这就是你的标签回调的样子。

label: function (tooltipItem, data) {
  const labelArr = [];
  var array = data.tooltipText[tooltipItem.index];
  for (var text in array){
    labelArr.push(text + ": " + array[text])
  }
  return labelArr;
},