Question

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

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

Answer 1

我认为最好添加每月和每年两个名称的标签，这样用户可以轻松单击标签来更改视图。例如，按月查看，将所有月份显示在一张图表中太多了（我认为这会弄乱数据），您只应在一个月内执行此操作。只需将datetimepicker仅添加为月份（与年份相同）即可，更改时您可以调用也会更改图表的函数（请参见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();
    });

Answer 2

以防万一有人在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等的示例。

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

2 个答案: