如何通过下拉菜单更改 x 轴的范围 - javascript plotly

Question

我正在尝试使用 plolty.js 创建一个图表，以显示具有不同值的时间序列。我已经添加了范围选择器来更改显示值的时间段。我还想添加一个下拉菜单来更改 xaxis 的范围（实际上是 beginDate）。我尝试用重新布局方法更改 xaxis.range。但不知何故，当我点击一个时，它总是显示 2000 年如果你能帮助我，那就太好了！

buttonsDates=[];
first = beginDate.getFullYear();
end = endDate.getFullYear();
for(i = first; i <= end; i++) buttonsDates.push({
label: i, method: 'relayout',args: [
{
'xaxis.range':          '[new Date(i,1),new Date(i,12)]',
'xaxis.rangeslider':    '[type:date, range:[new Date(i,1),new Date(i,12)]]'
}]
});


var myPlot = node.children[0],
    trace1 = {
        x: values.map(a => a.xvalue), y: values.map(a => a.yvalue),
        type: 'scatter',
        name: 'Messwert des Patienten',
        locale: 'de_DE',
        hovertemplate: '<b>Wert: </b> %{y}' +
            '<br><b>Datum: </b> %{x}<br>'
    },
    data = [
        trace1
    ],
    layout = {
        title: 'Verlaufswert: ' + vitSigTitle,
        hovermode: "closest",
        showlegend: true,
        xaxis: {
            autorange: true,
            range: [beginDate, endDate],
            rangeselector: {
                buttons: [
                    {
                        count: 1,
                        label: 'Tag',
                        step: 'day',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Woche',
                        step: 'week',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Monat',
                        step: 'month',
                        stepmode: 'backward'
                    },
                    {
                        count: 6,
                        label: '6 Monate',
                        step: 'month',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Jahr',
                        step: 'year',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Dieses Jahr',
                        step: 'year',
                        stepmode: 'todate'
                    },
                    {
                        label: 'Gesamt',
                        step: 'all'
                    }
                ]
            },
            rangeslider: { range: [beginDate, endDate] },
            type: 'date'
        },
        yaxis: {
            title: vitSigUnit,
            autorange: false,
            range: [minValue - 10, maxValue + 10],
            type: 'linear',
            locale: 'de_DE'
        }, updatemenus: [{
            buttons:
                buttonsDates

        }]
    };




Plotly.newPlot(node.children[0], data, layout, { locale: 'de-DE' });
console.log(Plotly.BUILD);

Answer 1

我是这样处理的：

var beginDate = new Date (Math.min.apply(Math, values.map(function (o) { return o.xvalue; })));
    var endDate = new Date (Math.max.apply(Math, values.map(function (o) { return o.xvalue; })));
    var minValue = Math.min.apply(Math, values.map(function (o) { return o.yvalue; }));
    var maxValue = Math.max.apply(Math, values.map(function (o) { return o.yvalue; }));

    const sortedValues = values.sort((a, b) => a.xvalue - b.xvalue);
    buttonsDates=[];
    first = beginDate.getFullYear();
    end = endDate.getFullYear();

   buttonsDates.push({
    label: 'Alle Jahre', method: 'relayout',args: [
    {
    'xaxis.range':  [beginDate,endDate]
    }
    ]
    });

    for(i = first; i <= end; i++) buttonsDates.push({
    label: i, method: 'relayout',args: [
    {
    'xaxis.range':  [new Date(i,0),new Date(i,12)]
    }]
    });

如何通过下拉菜单更改 x 轴的范围 - javascript plotly

How to change the range of x axis through drowpdown menu - javascript plotly

javascript

time-series

plotly

plotly.js