Chartjs -如何从www.example.com传入2个值datasets.data?

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

我需要在工具提示2中显示数据集中的值:

chartData2: {
        labels: ["1 June", "15 June", "30 June"],
        datasets: [
          {
            slabel: "Active Accounts",
            data: [
              {amount: 150000, percent: '+5.27%'}, 
              {amount: 95000, percent: '+2.27%'}, 
              {amount: 350000, percent: '+3.27%'}
            ],
          },
          {
            slabel: "New Accounts",
            data: [
              {amount: 150000, percent: '+2.27%'}, 
              {amount: 250000, percent: '+2.27%'}, 
              {amount: 750000, percent: '+5.27%'}
            ],
          }
        ]
      },

如何解析工具提示中的第二个值?图表只能用amount渲染,但第二个值必须在工具提示中。
我正在编写自定义工具提示函数,但我无法在工具提示示例中找到解析第二个值百分比的第二个值或索引

tooltip: {
                // Disable the on-canvas tooltip
                enabled: false,

                external: (context) => {
                    // Tooltip Element
                    let tooltipEl = document.getElementById('chartjs-tooltip');

                    // Create element on first render
                    if (!tooltipEl) {
                        tooltipEl = document.createElement('div');
                        tooltipEl.id = 'chartjs-tooltip';
                        tooltipEl.innerHTML = '<table></table>';
                        document.body.appendChild(tooltipEl);
                    }

                    // Hide if no tooltip
                    const tooltipModel = context.tooltip;
                    if (tooltipModel.opacity === 0) {
                        tooltipEl.style.opacity = 0;
                        return;
                    }

                    // Set caret Position
                    tooltipEl.classList.remove('above', 'below', 'no-transform');
                    if (tooltipModel.yAlign) {
                      tooltipEl.classList.add(tooltipModel.yAlign);
                    } else {
                      tooltipEl.classList.add('no-transform');
                    }

                    function getBody(bodyItem) {
                      return bodyItem.lines;
                    }

                    // Set Text
                    if (tooltipModel.body) {
                        const titleLines = tooltipModel.title || [];
                        const bodyLines = tooltipModel.body.map(getBody);

                        console.log(tooltipModel)

                        let innerHtml = '<thead>';

                        titleLines.forEach(function(title) {
                            innerHtml += '<tr><th class="chartjs-tooltip-title">' + title + '</th></tr>';
                        });
                        innerHtml += '</thead><tbody>';

                        bodyLines.forEach((body, i) => {

                          const colors = tooltipModel.labelColors[i];
                          let style = 'background:' + colors.backgroundColor;
                          style += '; border-color:' + colors.borderColor;
                          style += '; border-width: 2px';
                          const span = '<span style="' + style + '"></span>';
                          innerHtml += '<tr><td>' + this.data.datasets[i].slabel + ': <span class="tooltip-rl-text">' + body + '</span>' + '</td></tr>';
                        });
                        innerHtml += '</tbody>';

                        let tableRoot = tooltipEl.querySelector('table');
                        tableRoot.innerHTML = innerHtml;
                    }

                    const position = context.chart.canvas.getBoundingClientRect();
                    // const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);

                    // Display, position, and set styles for font

                    tooltipEl.style.opacity = 1;
                    tooltipEl.style.position = 'absolute';
                    tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX - tooltipEl.clientWidth / 2   +'px';
                    tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY  + 50 + 'px';
                    // tooltipEl.style.font = bodyFont.string;
                    tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
                    tooltipEl.style.pointerEvents = 'none';
                }
            }

我能做什么?在工具提示中显示两个值,但只按金额绘制图表?

syqv5f0l

syqv5f0l1#

所有的数据都可以在这样的上下文中获得:

external: (context) => {
  const rawDataPointInfo = context.tooltip.dataPoints[0].raw.percent;
}

示例:
第一个

相关问题