charts - 图表js：根据数据生成动态标签

Question

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

我想有一个range filter例子： 2012/01/1 to 2014/01/1 我该怎么做这labels会太多？可以说我决定这样做，yearly但是如果用户想从中看到year jan我nov应该每月进行一次，那我怎么知道呢？如果是每月还是每年，或者最好的方法是什么？

Answer 1

以防万一有人搜索并找到了这个线程，因为他们想要在 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 等的示例。

Answer 2

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

因此，现在当您具有更改图表的功能时，只需通过获取所选月份和本月的数据来更改数据。有一个更新函数，您可以在更新数据时调用它，它会更改图表（参见文档：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();
    });