Question

我正在尝试添加更改图表的“日期”范围的功能，并且添加了按钮回调，该回调更改了xAxes的最小值，然后调用chart.update（），但是图表不会改变。

我尝试手动输入数字，除非它是为表提供的数据中的值，否则不会更新图形。

this.analysisChart = new Chart(context, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: calculations.rollingTimestamps,
                datasets: [
                {
                    label: 'Cycle Times',
                    data: calculations.rollingCycleTimesXY,
                    borderColor: 'rgb(0,255,0,1)',
                    backgroundColor: 'rgb(0,255,0,0.5)',
                    type: 'scatter',
                    showLine: false,
                    labels: calculations.rollingAliases
                },
                {
                    label: 'Rolling μ',
                    borderColor: 'rgb(255, 99, 132, 1)',
                    backgroundColor: 'rgb(255, 99, 132, 0.5)',
                    data: calculations.rollingAverage,
                    fill: false,
                    pointRadius: 0
                },
                {
                    label: 'Overall μ',
                    data: calculations.overallAverageArr,
                    fill: false,
                    borderColor: 'rgb(0,0,0,1)',
                    backgroundColor: 'rgb(0,0,0,0.5)',
                    pointRadius: 0,
                    showLine: true
                },
                {
                    label: 'μ + σ',
                    data: calculations.rollingMaxStandardDeviation,
                    fill: 4,
                    backgroundColor: 'rgb(50,50,255,0.35)',
                    borderColor: 'rgb(50,50,255,0)',
                    pointRadius: 0,
                    showLine: true
                },
                {
                    label: 'μ - σ',
                    data: calculations.rollingMinStandardDeviation,
                    fill: 3,
                    backgroundColor: 'rgb(50,50,255,0.35)',
                    borderColor: 'rgb(50,50,255,0)',
                    pointRadius: 0,
                    showLine: true
                },
                {
                    label: 'μ + 2 * σ',
                    data: calculations.rollingMaxSecondStandardDeviation,
                    fill: 3,
                    backgroundColor: 'rgb(50,50,255,0.3)',
                    borderColor: 'rgb(50,50,255,0)',
                    pointRadius: 0,
                    showLine: true
                },
                {
                    label: 'μ - 2 * σ',
                    data: calculations.rollingMinSecondStandardDeviation,
                    fill: 4,
                    backgroundColor: 'rgb(50,50,255,0.3)',
                    borderColor: 'rgb(50,50,255,0)',
                    pointRadius: 0,
                    showLine: true
                }
                ]
            },

            // Configuration options go here
            options: {
                layout: {
                    padding: {
                        left: 20,
                        right: 20,
                        top: 0,
                        bottom: 0
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var label = data.datasets[tooltipItem.datasetIndex].label || '';

                            if (label) {
                                label += ': ';
                            }
                            label += Math.round(tooltipItem.yLabel * 10) / 10;
                            return label + " days";
                        }
                    }
                },
                hover: {
                    mode: 'index',
                    intersect: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            type: 'linear',
                            callback: function(label, index, labels) {
                                return label + " days";
                            }
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            type: 'linear',
                            min: 0,
                            callback: function(label, index, labels) {
                                return new Date(label).toDateString();
                            }
                        }
                    }]
                },
                title: {
                    display: true,
                    text: 'Cycle Times'
                }
            }
        });

我想做的是给一个任意数字，然后让它对数据执行greater than检查，以确定要切除的内容，而不是进行find，然后切除所有内容在数组中的索引之后。

我该怎么做？

Answer 1

作为解决方案，我只是编写了一个函数来遍历数组，并找到第一个大于或等于我想要的值的值，然后将xAxes的最小值设置为该值。不是很理想，但是至少它能正常工作。

我在文档中找不到有关最小值的回调的任何信息。

xAxes的最小值是否必须在数据集中

1 个答案: