Highcharts:setData导致重绘()不需要的闪烁

时间:2017-11-28 11:46:54

标签: highcharts

我每两秒动态更新一次图表,以使图表保持最新状态。此更新会导致图表反复闪烁。您可以在YouTube上找到一段简短的视频:https://youtu.be/bP8HYQBldMc

我已经废除了所有动画,以防止线路的任何移动,但它没有任何区别。

代码在typescript(anguar2项目)中,但Highcharts对象是纯JS:

    this.chart["series"][0].setData(bellChart.productionData, false);
    this.chart["xAxis"][0].setExtremes(bellChart.from, bellChart.until, false, false);
    this.chart.redraw(false);

图表选项:

{
            chart: {
                type: 'line',
                skipClone: true
            },
            title: {text: ''},
            series: [{}],
            credits: {enabled: false},
            xAxis: {
                type: 'datetime',
                tickInterval: 14400 * 1000,
                startOnTick: true,
                endOnTick: true,
                tickLength: 5,
                tickWidth: 1,
                lineColor: HighchartsThemes.LINE_COLOR,
                tickColor: HighchartsThemes.LINE_COLOR,
                labels: {
                    style: {
                        color: HighchartsThemes.LINE_COLOR,
                        fontSize: HighchartsThemes.FONT_SIZE
                    },
                },
                dateTimeLabelFormats: { // don't display the dummy year
                    millisecond: '%H',
                    second: '%H',
                    minute: '%H',
                    hour: '%H',
                    day: '%H',
                    month: '%H',
                    year: '%H'
                },
            },
            yAxis: {
                min: 0,
                max: 100,
                lineWidth: 1,
                tickInterval: 25,
                startOnTick: true,
                endOnTick: true,
                tickWidth: 1,
                tickLength: 5,
                title: {
                    text: null,
                    reserveSpace: false
                },
                gridLineColor: HighchartsThemes.LINE_COLOR,
                gridLineDashStyle: "dash",
                lineColor: HighchartsThemes.LINE_COLOR,
                tickColor: HighchartsThemes.LINE_COLOR,
                labels: {
                    align: 'right',
                    formatter: function () {
                        return this.value + " %";
                    },
                    style: {
                        color: HighchartsThemes.LINE_COLOR,
                        fontSize: HighchartsThemes.FONT_SIZE
                    },
                },
            },
            legend: {
                borderColor: HighchartsThemes.LINE_COLOR,
                floating: true,
                align: 'right',
                verticalAlign: 'top'
            },
            tooltip: {enabled: false},
            plotOptions: {
                series: {
                    enableMouseTracking: false,
                    animation: false,
                    lineWidth: 1,
                    shadow: false,
                    marker: {enabled: false}
                }
            }
    }

0 个答案:

没有答案