图表js：根据数据生成动态标签答案

【问题标题】：Chart js: generate dynamic labels according to the data图表js：根据数据生成动态标签
【发布时间】：2019-01-29 07:26:55
【问题描述】：

我正在动态获取图表.. 这是当前月份的chart，范围为 1-31

我想要一个range filter，例如： 2012/01/1 to 2014/01/1 我该怎么做labels 会太多？假设我决定这样做yearly，但如果用户想从yearjan 到nov 看到我应该每月做一次，那我怎么知道？如果是每月还是每年，或者最好的方法是什么？

【问题讨论】：

标签： charts chart.js chartjs-2.6.0 vue-chartjs

【解决方案1】：

我认为最好每月和每年添加两个标签，以便用户可以轻松单击标签来更改视图。例如在月视图中，在一张图表中显示所有月份会太多（我认为它会与数据混淆），你应该只在一个月内这样做。只需添加日期时间选择器，仅使用月份（多年相同），更改时您可以调用函数，该函数也将更改图表（请参阅此处它是如何工作的 https://www.tutorialspoint.com/How-does-jQuery-Datepicker-onchange-event-work）。您也可以设置年份范围。

所以，现在当您拥有更改图表的功能时，只需通过获取所选月份和本月的数据来更改数据。有一个更新函数，当你更新数据时可以调用它，它会改变图表（参见文档：https://www.chartjs.org/docs/latest/developers/updates.html）。

以下是通过单击按钮将新数据集添加到现有图表的代码示例：

document.getElementById('addDataset').addEventListener('click', function() {
        var colorName = colorNames[barChartData.datasets.length % colorNames.length];
        var dsColor = window.chartColors[colorName];
        var newDataset = {
            label: 'Dataset ' + (barChartData.datasets.length + 1),
            backgroundColor: color(dsColor).alpha(0.5).rgbString(),
            borderColor: dsColor,
            borderWidth: 1,
            data: []
        };

        for (var index = 0; index < barChartData.labels.length; ++index) {
            newDataset.data.push(randomScalingFactor());
        }

        barChartData.datasets.push(newDataset);
        window.myBar.update();
    });

【讨论】：

【解决方案2】：

以防万一有人搜索并找到此线程，因为他们想要动态 units 用于在 Chart.js 中绘制的点，那么下面的代码将为您提供如何配置您的选项 -> 工具提示 -> 回调 -> 标签

options: {
    tooltips: {
        callbacks: {
            label: (item) => {
                if (condition1 == true) {
                    return (item.yLabel / 1000000000).toFixed(2) + ' Gbps'
                }
                else if (condition2 == true) {
                    return (item.yLabel / 1000000).toFixed(2) + ' Mbps'
                }
                else if (condition3 == true) {
                    return (item.yLabel / 1000).toFixed(2) + ' Kbps'
                }
                else {
                    return item.yLabel.toFixed(2) + ' bps'
                }
            },
        },
    },
},

这是一个根据需要将 bps 转换为 Kbps、Mbps、Gbps 等的示例。

【讨论】：