如何在 xAxes 上显示与工具提示不同的值 Chart.js V3

Question

我不是很熟悉Chart.js V3.7.0（这是我目前使用的版本）所以我尝试以不同的方式在xAxes 上显示不同的值，在工具提示上显示不同的值。这里需要注意的重要一点是，我正在使用 Php 到 echo 数据集中的值。

例如 （我使用的data变量）:

      const data = {
        datasets: [{
          backgroundColor: 'black',
          borderColor: '#2d84b4',
          borderWidth: 2,
           fill: false,
            pointBorderColor: 'rgba(0, 0, 0, 0)',
            pointBackgroundColor: 'rgba(0, 0, 0, 0)',
            pointHoverBackgroundColor: 'rgba(0,0,0,0)',
            pointHoverBackgroundWidth: 5,
            pointHoverBorderColor: 'rgba(45, 132, 180, 0.5)',
            pointHoverBorderWidth: 4,
            pointStyle: 'circle',
            pointHoverRadius: 5.5,
            data: [ <? echo $values; ?> ],
        }], 
            labels: [ <? echo $labels; ?> ],
      };

所以我的 php 以这种形式回应 $values 变量值：
{0.504, 0.675, 0.305, etc...}

同样适用于 $labels 变量，但因为 labels 是与时间相关的数据，所以我将它们显示为字符串：
示例：{'Dec 28', '01:00', '02:00', etc...}

这里是config变量里面包含了data变量，然后里面调用了config变量图表的初始化。

配置:

const config = {
    type: 'line',
    data: data,
    options: {
        onHover: (event, activeElements) => {
            if (activeElements?.length > 0) {
              event.native.target.style.cursor = 'pointer';
            } else {
              event.native.target.style.cursor = 'auto';
            }
          },
        animation: {
            duration: 0
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                stacked : true,
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: <? echo $ticks_val; ?>,
                    maxRotation: 0
                },
                grid: {
                  display: true,
                  drawBorder: false,
                  drawOnChartArea: false,
                  drawTicks: true,
                  tickLength: 3,
                },
            },
            yAxes: {
                    min: '0.0',
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 6,
                    },
                    grid: {
                        drawBorder: false,
                        drawTicks: false
                    }
                },
            },
            elements: {
                point: {
                    radius: 5
                }
            },
            locale: 'en-EN',
            plugins: {
              tooltip: {
                displayColors: false,
                backgroundColor: 'rgba(45,132,180,0.8)',
                bodyFontColor: 'rgb(255,255,255)',
                callbacks: {
                  title: () => {
                    return
                  },
                  label: (ttItem) => ( `${ttItem.parsed.y} ppm` ),
                  afterBody: (ttItems) => (ttItems[0].label)
                }
              },
              legend: {
                display: false
              }
            }
          }  
        };

目标：我想在 tooltip 中 echo 一个不同的 php 变量，但我不想更改我当前在 xAxes 上显示的内容。问题是，如果我只是在工具提示中回显另一个 php 变量，我最终会显示错误的 Date 日期，这仅仅是因为索引值未与图表相关联，等等与工具提示弹出窗口相关联。

备注:

1): Chart.js 版本: 3.7.0

图表的图片:

Answer 1

这是可以实现的。一种解决方案是重新格式化存储在 $labels 中的值，以便它们保持一致。例如，以您要呈现的格式存储每个值，即 {'Dec 28 00:00', 'Dec 28 01:00', 'Dec 02:00'}。然后您可以使用回调来创建自定义报价格式。

options: {
    scales: {
        x: {
            stacked : true,
            ticks: {
                autoSkip: true,
                maxTicksLimit: 12,
                maxRotation: 0,
                callback: function(value) {
                    let labelValue = this.getLabelForValue(value);
                    if(labelValue.slice(-5, -3) == '00') {
                        return labelValue.slice(0, -6);
                    } else {
                        return labelValue.slice(-5);
                    }
                }
            }
        }
    }
}

JSFiddle showing this working

如何在 xAxes 上显示与工具提示不同的值 Chart.js V3

How can I display different values on xAxes than on tooltip Chart.js V3

javascript

php

chart.js