如何在chart.js中为工具箱和轴提供不同的标签

ohtdti5x 于 2022-11-07 发布在 Chart.js

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

我已经用chart.js 3.7.0提供了一个简单的折线图。我如何为轴和工具箱提供不同的标签呢？在我的例子中，我喜欢为轴给予3个特殊值之外的空标签，但在工具箱中的一个点的确切日期值。
我的版本：

<script>
  chartLabels = ['2 years ago','', ... , '','1 year ago','', ... ,'','Today'];
  chartData = [0,0, ... ,0,0.13,0.08, ... ,0,0.1];
  yMax = 3;
</script>
<canvas id="chart-myvalues" width="160" height="90"></canvas>

此外，在JS中：

const data = {
    labels: chartLabels,
    datasets: [{
        label: 'My Value XYZ',
        data: chartData,
        tension: 0.5,
    }]
};
const config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    autoSkip: false,
                    maxRotation: 0,
                    minRotation: 0
                }
            },
            y: {
                min: 0,
                max: yMax,
                grid: {
                    display: false
                }
            }
        }
    }
};
new Chart('chart-myvalue',config);

正如这里所要求的正是我所希望的：在上面的截图中，您在x轴和工具箱中看到了1 year ago。在x轴上，它就像我希望的那样。在工具箱中，我希望看到该值xyz的确切日期（我可以提供日期，但我需要知道如何在chart.js中为工具箱和轴提供不同的标签）

chart.js

来源：https://stackoverflow.com/questions/72374970/how-to-provide-different-labels-in-chart-js-for-toolbox-and-axis

1条答案

按热度按时间

qybjjes11#

它叫做tooltip，你可以在这里读到更多关于它的信息。基本上，你必须对title和label做一个callback，以分别改变tooltip的x轴和y轴。下面是它的外观：

boxLabels = ['2020-05-26', '2020-08-26', '2020-11-26', '2021-02-26', '2021-05-26', '2021-08-26', '2021-11-26', '2022-02-26', '2022-05-26'];  

options: {
    plugins: {
        tooltip: { 
            callbacks: { 
                title: function(context) {
                    let title = context[0].label || boxLabels[context[0].dataIndex];
                    return title;
                 },
                 label: function(context) {
                    let label = context.dataset.label + ": " + context.dataset.data[context.datasetIndex];
                    return label;
                 }
            }
        }
    }
};

注意context for title返回一个数组，所以你必须索引它来得到元素。完整的例子见下面的代码片段。
第一个

赞(0）回复(0）举报 2022-11-07

我来回答

如何在chart.js中为工具箱和轴提供不同的标签

1条答案

相关问题

热门标签

最新问答