Question

我正在使用HighStocks并实现了两个按钮，以便获得图表数据的两个视图； “全部”和“过去30天”。我也已经定义了按钮的状态，但是即使单击“所有”按钮，“过去30天”的按钮在单击后也不会更改其外观。通过一些解决方法，图表的“已选择”属性也会更新，甚至按钮的状态也会发生变化。但是，其外观保持不变。

听是我的选择对象：

    balanceChart = Highcharts.stockChart('balance-chart-section', {
        chart: {
            type: 'area',
            style: {
                fontFamily: 'ComicSans',
            }
        },
        legend: {
            enabled: true,
            align: "right",
            verticalAlign: "top",
            rtl: false,
            y: 0,
        },
        rangeSelector: {
            enabled: true,
            allButtonsEnabled: true,
            selected: 1,
            buttons: [{
                type: 'day',
                count: 30,
                text: 'Last 30 days',
                events: {
                    click: function () {
                        this._offsetMax = 0;
                        this._offsetMin = Math.max(chartLength - 30, 0);

                        balanceChart.rangeSelector.selected = 0;
                        balanceChart.rangeSelector.buttons[0].setState(2);
                        balanceChart.rangeSelector.buttons[1].setState(0);

                    }
                },
            }, {
                type: 'all',
                text: 'All',
                events: {
                    click: function () {
                        this._offsetMin = 0;
                        this._offsetMax = Math.max(chartLength - 1, 0);

                        balanceChart.rangeSelector.selected = 1;
                        balanceChart.rangeSelector.buttons[1].setState(2);
                        balanceChart.rangeSelector.buttons[0].setState(0);


                    }
                }
            }],
            verticalAlign: 'bottom',
            buttonPosition: {
                align: 'center',
                y: 12,
            },
            inputEnabled: false,
            buttonSpacing: 30,
            buttonTheme: {
                style: {
                    fill: 'none',
                    color: '#595959',
                },
                stroke: 'none',
                padding: 10,
                fontWeight: 'bold',
                height: 18,
                width: null,
                'stroke-width': 0,
                r: 10,
                states: {
                    hover: {
                        fill: '#0ec3ee',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: '#16aed2',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
        },
        navigator: {
            enabled: false,
        },
        scrollbar: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        title: {
            text: ''
        },
        subtitle: {},
        xAxis: {
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            type: 'datetime',
            lineColor: 'transparent',
            tickLength: 0,
            crosshair: {
                width: 2,
                color: 'gray',
                dashStyle: 'shortDash'
            },
        },
        yAxis: {
            title: {
                enabled: false
            },
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        },
        tooltip: {
            useHTML: true,
            shared: true,
            formatter: function () {
                var points = this.points;
                var pointsLength = points.length;
                var tooltipMarkup =
                    pointsLength ? '<div class="chart__tooltip" style="margin-bottom: 5px">' + points[0].key + '</div><br/>' : '';
                var index;
                var yValue;

                for (index = 0; index < pointsLength; index += 1) {
                    yValue = (points[index].y);

                    tooltipMarkup += '<div class="chart__tooltip" style="margin-bottom: 5px">' +
                        points[index].series.name + ': <b>' + transform(number_formatter(yValue)) + '<b/>' + ' IRT' + '<br/></div>';
                }

                return tooltipMarkup;
            },
            borderWidth: 1,
            backgroundColor: 'white',
            borderColor: '#B5CAE1',
            borderRadius: 10,
            split: false,
        },
        plotOptions: {
            series: {
                lineWidth: 0
            },
            area: {}
        },
        series: [{
            name: 'OriginalWithSurplus',
            // data: seriesOne,
            data: seriesOneTemp,
            color: '#acdeaa',
        }, {
            name: 'Original',
            // data: seriesTwo,
            data: seriesTwoTemp,
            color: '#bcc0ff',
        }]
    });

为什么我的其中一个按钮在单击时不会改变外观？

谢谢！

Answer 1

如果正确设置count和type按钮的属性，则不需要使用click与事件的自定义代码：

    buttons: [{
        type: 'day',
        count: 30,
        text: 'Last 30 days'
    }, {
        type: 'all',
        text: 'All'
    }]

实时演示：http://jsfiddle.net/BlackLabel/3Ld08eot/

API参考：https://api.highcharts.com/highstock/rangeSelector

在高图中，带有自定义事件的范围选择器按钮的状态无法正确更改

1 个答案: