javascript - highcharts/highstock 在 500 点后不显示标记

Question

似乎超过 500 点导致我们的 highstocks 标记根本不显示 - 您可以看到 http://www.ethnographicedge.com/topic/senkaku-trial-400/ (400 分) vs http://www.ethnographicedge.com/topic/senkaku-trial-600-s1/ (600分)。未显示的数据是绿色球体代表的“事件”。

我已经考虑过编辑turboThreshold，但没有运气..

这是一个简化的 jsfiddle，下面是我的完整代码:

jsfiddle.net/marquex/etdL7/1

当你改变 var 点 = 200 时；到400时，红点不显示。有没有办法强制显示某些强制点，无论数据大小如何？

graphdata = <?php echo topic_data(get_the_ID()); ?>;
    extradata = <?php echo extra_data(get_the_ID()); ?>;
    eventdata = <?php global $events; echo json_encode($events) ?>;
    eventdata.sort(function(a,b){
        return a.date - b.date;
    });

;(function($){
    var parseData,
        container = $('#graphcontainer'),
        last = false,
        m_names = new Array("January", "February", "March",
            "April", "May", "June", "July", "August", "September",
            "October", "November", "December");
    ;
    if(! container.length)
        return;

    getEventPoint = function(e,idx){
        var color = 'gray';
        if(e.forecast == 'fore_successful_down')
            color = 'red';
        else if(e.forecast == 'fore_successful_up')
            color = 'green';

        return {
            x: parseInt(e.stringdate),
            y: parseInt(e.value),
            marker: {
                enabled: true,
                radius:8,
                fillColor: color,
                lineWidth:3,
                lineColor: 'white',
                states: {
                    hover: {
                        enabled: true,
                        radius:8,
                        fillColor: 'white',
                        lineWidth:3,
                        lineColor: color
                    }
                }
            },
            name: idx
        }
    }

    dateDay = function(day){
        if( day % 10 == 1)
            return day + 'st';
        if( day % 10 == 2)
            return day + 'nd';
        if( day % 10 == 3)
            return day + 'rd';
        return day + 'th';
    }

    formatDate = function(timestamp){
        var date = new Date(timestamp);
        return m_names[date.getMonth()] + ' ' + date.getDay() + ', ' + date.getFullYear();
    }

    tooltipFormatter = function(data){
        var point = data.points[0],
            name = point.point.name,
            output = '<div class="tooltip-date">' + formatDate(data.x) + '</div><div class="tooltip-value"><span class="tooltip-unit"><?php the_field("value_text") ?>:</span> ' + data.y + '</div>';

        if(typeof name !== "undefined"){
            var e = eventdata[name];
            return '<div class="tooltip-date">' + formatDate(data.x) + '</div>' +
                    '<div class="tooltip-title">' + e.number + '</div>' +
                    '<div class="tooltip-trend tooltip-' + e.trend + '"></div> <!-- I will resize the image > background-size: -->' +
                    '<div class="tooltip-cycle">' + e.cycle + '</div>';
        }

        if(data.points[1])
            output += '<div class="tooltip-secondary><div class="tooltip-value"><span class="tooltip-unit"><?php the_field("extra_value_text") ?>:</span> ' + data.points[1].y + '</div>'

        return output;
    }

    parseData = function(data, eventsData){
        var parsedData = [],
            eventIdx = 0,
            events = eventsData ? eventsData.slice(0) : [],
            e = events[0]
        ;
        if(e)
            e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
        for (var i = 0; i < data.length; i++) {
            var item = data[i],
                timestamp = false;
            if(item.date && item.date.match(/^\d{4}\/\d{2}\/\d{2}$/) && item.value && parseFloat(item.value) == item.value){

                timestamp = (new Date(item.date)).getTime();
                if(e && timestamp > e.stringdate > last) {
                    parsedData.push(getEventPoint(e, eventIdx));
                    parsedData.push([timestamp, parseFloat(item.value)]);
                    e = events[++eventIdx];
                    if(e)
                        e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
                }
                else if(e && timestamp == e.stringdate) {
                    parsedData.push(getEventPoint(e, eventIdx));
                    e = events[++eventIdx];
                    if(e)
                        e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
                }
                else
                    parsedData.push([timestamp, parseFloat(item.value)]);
            }
        };
        while(e){
            parsedData.push(getEventPoint(e, eventIdx));
            e = events[++eventIdx];
            if(e)
                e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
        }
        return parsedData;
    };


 var series = [{
        name: 'Topic Data',
        data: parseData(graphdata, eventdata),
        color: '#666'
 }];

        if(extradata && extradata.length){
            series.push({
                name: 'Extra Data',
                data: parseData(extradata),
                yAxis: 1,
                color: '#fbb800'
            });
        }

        var yAxis = [{
            title: {
                text: '<?php the_field("value_text") ?>',
                style: { color: '#BBBBBB', fontSize: '1.2em' },
                margin: 12,
            },
            labels: {
                enabled: false,
                formatter: function() {
                    return this.value
                }
            },
            height: 300,
            lineColor: '#FFFFFF'

        }];

        if(extradata && extradata.length){
            yAxis[0].lineWidth = 2;

            yAxis.push({
                title: {
                    text: '<?php the_field("extra_value_text") ?>'
                },
                height: 200,
                top:350,
                offset:0,
                lineWidth:2,
                lineColor: '#FFFFFF'
            });

        }

    container.highcharts('StockChart', {
        chart: {
            type: 'spline',
            events: {
                load: function(e){
                    $('#tapapubli')
                        .detach()
                        .addClass('tapapubli')
                        .appendTo('#graphcontainer');
                }
            }
        },

        rangeSelector: {
            enabled: false,
            buttons:[
                {
                    type: '<?php echo $initial_zoom["type"] ?>',
                    count: <?php echo $initial_zoom["count"] ?>,
                    text: 'Initial'
                },
                {
                    type: 'All',
                    text: 'Reset'
                }
            ],
        },
        scrollbar: {
            enabled: false,
        },
         navigator: {
            maskFill: 'rgba(170, 170, 170, 0.75)',
            series: {
                color: '#FFD600',
                lineColor: '#AE8800'
            }
        },
        xAxis: {
        labels: {
                enabled: false
            },
            lineColor: '#FFF', /* BITBUCKET */
            tickColor: '#666666',
            tickLength: 0,
            tickWidth: 1,
            tickPosition: 'outside',
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
            day: '%e of %b',
            }
        },
        yAxis: yAxis,
        plotOptions: {
        lineColor: 'green',
            spline: {
                lineWidth: 3,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },

                marker: {
                    enabled: false
                },
                pointInterval: 36000000000,
                point: {
                    events: {
                        click: function(){
                            //console.log(this);
                            if(this.name)
                                window.location.href = '#event-' + eventdata[this.name].number;
                        }
                    }
                }
            }
        },

            series: series,

        tooltip: {
            formatter: function(){
                return tooltipFormatter(this);
            },
            useHTML: true,
            borderColor: '#333',
            shadow: false,
            borderRadius: 0
        }
    });
    if(!window.chart)
        window.chart = container.highcharts();
})(jQuery);

var getPointRecursive = function(date, list){
    if(list.length < 5){
        var found = false;
        for (var i = 0; i < list.length; i++) {
            var point = list[i];
        };
    }
}
var getSeriesPoint = function(date){

}

Answer 1

正如@Sebastian Bochan所说，您只需要显式设置plotOptions.series.dataGrouping.enabled = false。那么问题就会消失。