Highcharts不能连接年份之间的点

问题描述 投票:0回答:3

是否有可能在几年之间不连接点?请参阅下面的图形的屏幕截图。有人告诉我这是一种误导。到目前为止,我唯一的解决方案是为每个站点的每个采样年创建年末空值。在SQL表中大约有750个条目。似乎很粗糙。任何人都可以提出更优雅,更程序化的解决方案。

数据是通过PostgreSQL的json检索的。

任何建议或参考将不胜感激,

enter image description here

highcharts
3个回答
2
投票

可以通过空值点创建串联的间隙。

其他选项是将每年的数据放置在不同的系列中,这些数据将链接在一起并具有相同的颜色选项和名称。

示例:http://jsfiddle.net/kcccL6vw/1/

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        series: [{
            pointStart: Date.UTC(2013, 11, 30),
            pointInterval: 3,
            pointIntervalUnit: 'month',
            data: [1,2,3,4,5],
            name: 'Series',
            id: 'S1',
            color: '#fa0'
        },{
            pointStart: Date.UTC(2015, 0, 15),
            pointInterval: 3,
            pointIntervalUnit: 'month',
            data: [1,2,3,4,5],
            name: 'Series',
            linkedTo: 'S1',
            color: '#fa0'
        }]
    });
});

0
投票

如果您不想连接点,请使用散点图代替折线图。

type:'scatter'


0
投票

这很丑,但目前可以使用。我得到了现有数据的年份范围,然后将具有所有年终('12 / 31 / 20xx')空值的记录附加到现有数据中。 connectNulls:false阻止任何点连接到它们。然后按日期对数组进行排序,这是不必要的困难。

[我知道我的JavaScript技能很烂,所以如果有人看到加强它的方法,请回复。我需要我能得到的所有帮助。这是我的工作jsfiddle,>

感谢所有人的帮助和建议,

迈克尔

var cruiseDate = [];

for (var i = 0; i < data.length; i++) {
    sampleDate = data[i][1];
    thisDate = moment(sampleDate).format('MM/DD/YYYY');
    cruiseDate.push([thisDate]);
}

var minDate = moment(cruiseDate[0], "MM/DD/YYYY").year();
var maxDate = moment(cruiseDate[cruiseDate.length - 1], "MM/DD/YYYY").year();
console.log('first year: ' + minDate + '  last year:  ' + maxDate);

for (var i = minDate; i <= maxDate; i++) {
    temp = null;
    insertDate = moment('12/31/' + i).valueOf();
    console.log('epoch: ' + insertDate + '  ' + moment(insertDate).format("MM/DD/YYYY"));
    data.push(["year-end-null", insertDate, 0, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp])
}

function compare(a, b) { // from stackoverflow
    var aDate = new Date(a[1]);
    var bDate = new Date(b[1]);
    if (aDate < bDate) return -1;
    if (aDate > bDate) return 1;
    return 0;
}

data.sort(compare);
© www.soinside.com 2019 - 2024. All rights reserved.