Question

我对任何javascript / html等编码都是新手，所以如果这是一个愚蠢的问题，请原谅我。

我正在设计一个计算器，可以根据一些输入来预测您的退休收入。计算器工作正常，作为产出的一部分，我想说明退休收入如何随着退休年龄而变化。

我写了一个小脚本，填充了一个数组[[退休年龄1，收入1]，[退休年龄2，收入2] ......等]。我的代码中的这个数组称为agePoints，然后我想使用highcharts线图来绘制结果图。

我遇到的问题是图表显示的是不同的点而不是一条线。我已经尝试了许多解决方案，但都没有。

如果可以，请帮忙

代码如下：

$(function () {
    $('#container').highcharts({
        chart: {
            type:'line'
        },
        title: {
            text: 'Retirement Income',
            x: -20 //center
        },
        subtitle: {
            text: 'Income by Retirement Age',
            x: -20
        },
        xAxis: {
            // axisPoints is an array which contains the retirement ages only
            categories: axisPoints
            min:axisPoints[1],
            title: {
                text: 'Retirement Age'
            }
            //categories: axisPoints

        },
        yAxis: {
            min:0,
            title: {
                text: 'Monthly Income'
            },
        },
        legend: {
            enabled:false
        },
        credits: {
            enabled: false
        },   
        //one thing I tried below to get it to work
        plotOptions: {
            series: {
                connectNulls: true
                    }
                    },
        series: [{
            name: 'Projected Income',
            // age points is the array mentioned in my question above
            data: agePoints
        }]
    });
});

图表如下所示：

enter image description here

图表看起来很好，因为轴是正确的，数据显示正确。但是，不是显示一条线，而是每个年龄点都有一个不同的点（x轴上的年龄）。

提前致谢。

Answer 1

只需将agePoints数组中的缺失值替换为null。

例如比较这些

系列：[{ 名称：'东京'，数据：[''，6.9,9.5,14.5,18.4,21.5,25.2,26.5,23.3,18.3,13.9,9.6]，
}，{名称：'塔林'，数据：[null，4.9,4.5,4.5,4.4,3.5,2.2,26.5,23.3,18.3,13.9,9.6]}]

无法连接不同的highcharts点

1 个答案: