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

gg58donl  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(184)

我有一个折线图,我的数据是目前设置,但我需要做一个自定义标签的框显示时,光标在点。我得到一个对象发送到我的图表,其中有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发送到dataset的data,将data.labels发送到dataset的labels。对于数据。订阅,我已经将其发送到悬停标签的工具提示中。密码在下面。这个标 checkout 现,但我想列出他们在对方,但“\n”不工作,在这一部分。有什么我应该添加的东西使它成为可能吗?

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作为一行。

kgsdhlau

kgsdhlau1#

这里你可以做的是,而不是为标签构建字符串,你可以构建数组,然后简单地返回它。这就是标签回调的样子。

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

相关问题