Question

我想用series.addPoint（[xTime，yValue]，true，true）添加许多点来制作图表; 一切都运行正常，但如果图表太大以至于整个容器都被填充并且我使用相反的方式：对于y轴，则最后一个点总是丢失，但是在添加下一个点时将显示。没有相反：真我可以看到点都被正确添加，但我必须将y轴放在右边。我试图增加偏移量，但这并没有解决问题。

如何显示最后一点？

Answer 1

这是我的jsfiddle：http://jsfiddle.net/Charissima/TFHEu/1/

在右上角，显示实际的y值。如您所见，图表正确显示，直到达到正确的边距。后面的图表总是落后一步。

var prevY = 0;
var data = [];
var time = (new Date()).getTime(), i;
// Getting first data, show as diagonals
for (i = -19; i <= 0; i++) {
    data.push({
        x: time + i * 1000,
        y: Math.round(Math.random() * 11)
    });
}
$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global : {
                useUTC : false
            },
            lang: {
                months: ['Jan.', 'Feb.', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
                weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                decimalPoint: ',',
                thousandsSep: '.'
            },
            chart : {
                zoomType: 'x'
            },
            scrollbar: {
                enabled: true
            },
            navigation: {
                buttonOptions: {
                    align: 'left'
                }
            },
            navigator: {
                enabled: true,
                top: 388,
                outlineColor: '#C0C0C0',
                outlineWidth: 1
            },
            tooltip: {
                enabled: true,
                xDateFormat: '%d.%m.%Y %H:%M:%S'
            },
            credits: {
                enabled: false
            },                                          
            title: {
                text : ''
            },
            xAxis: {
                type: 'datetime',
                lineColor: '#EEEEEE',
                tickColor: '#EEEEEE',
                gridLineColor: '#EEEEEE',
                minorGridLineColor: '#FFFFFF',
                gridLineWidth: 1,
                minRange: 1 * 60 * 1000,
                range: 3 * 60 * 1000,
                labels: {
                    enabled: true
                }
            },
            yAxis: {
                lineColor: '#EEEEEE',
                tickColor: '#EEEEEE',           
                gridLineColor: '#EEEEEE',               
                opposite: true,
                offset: 5,
                lineWidth: 1,
                tickWidth: 1,
                tickInterval: 1,                                        
                minorGridLineColor: '#FFFFFF', 
                minorTickInterval: 'auto',
                minorGridLineWidth: 0,
             minorTickColor: '#FFFFFF',
             minorTickWidth: 1,
             endOnTick: false,
                title: {
                    enabled: false
                },
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 1,',','.');
                    }                   
                }                   
            },
            plotOptions: {
                series: {
                    lineWidth: 1,
                    threshold: null,
                    showInLegend : false,
                    marker: {
                        enabled: false,
                        radius: 2
                    }
                }
            }

        }); 
        $('#container').highcharts({
            chart: {
                events: {
                    load: function() {
                        var chart = this;
                        var series = this.series[0];                                
                        setInterval(function() {
                            var xTime = (new Date()).getTime(); // current time                         
                            var y = Math.round(Math.random() * 11);
                            data.push([ xTime, prevY ]);                                    
                            data.push([ xTime, y ]);
                            series.setData(data, true);
                            chart.xAxis[0].setExtremes( chart.xAxis[0].min, chart.xAxis[0].max);
                            document.getElementById('value').innerHTML = y;
                            prevY = y;
                        }, 3 * 1000);
                    }
                }
            },
            series: [{
                name: 'series',
                type : 'area',
                color: 'rgba(026, 089, 184, 1)',
                fillColor: 'rgba(200, 221, 251, 0.5)', // nicht mit # Hexcode angeben, sonst funktioniert Opacity (Durchsichtigkeit) nicht                
                data: data
            }]
        });

    });

});

Answer 2

我找到了解决方案：原因是yAxis的lineWidth将覆盖最右边的点线，当设置lineWidth：0时，它工作正常。

当y轴相反时，addpoint后延迟：true

2 个答案: