HighChart irrgular Mapping

Question

我创建了一个HighChart ..但是在每个第二个坐标后，它的2个数据坐标在y轴上重叠。

My JSFiddle

我的代码：

$(function () {
    var highOptions = {

        chart: {
            type: 'line',
            renderTo: 'container2',
            zoomType: 'x',
            marginTop: 100

        },

        title: {
            text: 'Score'
        },

        subtitle: {
            text: '  '
        },

        xAxis: {
            title: {
                text: 'XXX'
            },
            categories: [],
            labels: {
                rotation: 45,
                step: 1,
                y: 30
            }
        },

        yAxis: [{ // left y axis
            title: {
                text: 'XXX'
            },
            min: 0,
            max: 9,
            plotLines: [{
                value: 7.5,
                color: '#ff0000',
                width: 2,
                zIndex: 4,
                label: {
                    text: 'XXX'
                }
            }]
        }],

        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return Highcharts.numberFormat(this.y, 1);
                    }
                }
            }
        },
        legend: {
            align: 'left',
            verticalAlign: 'top',
            y: 20,
            floating: true,
            borderWidth: 0
        },

        tooltip: {
            shared: true,
            crosshairs: true
        },
        series: []
    };


    highOptions.xAxis.categories = [0.1003, 0.1006, 0.1008, 1.1010, 1.1011, 1.1012, 1.1013, 2.4];

    highOptions.subtitle.text = "XXX:";
    chart = new Highcharts.Chart(highOptions);

    for (var x = 0; x <= 1; x++) {
        var newLP = [];
        switch (x) {
            case 0:
                aName = "One";

                newLP.push([0.1004, 4.5]);
                newLP.push([0.1008, 1.4]);
                newLP.push([1.1012, 5.5]);
                newLP.push([1.1014, 2, 6]);
                newLP.push([2.4, 8.22]);

                break;
            case 1:

                aName = "Two";

                newLP.push([0.1004, 5.52]);
                newLP.push([0.1008, 6.16]);
                newLP.push([1.1012, 6.34]);
                newLP.push([1.1014, 6.69]);
                newLP.push([1.1016, 6.36]);
                newLP.push([2.4, 7.44]);
                break;
        }

        chart.addSeries({
            name: aName,
            data: newLP
        }, false);
    }
    chart.redraw();
});

我用几个数据对它进行了测试..但它重叠了......可能是什么问题.. 请建议

Answer 1

问题是你的x轴点彼此如此接近，看起来它们是重叠的。例如，0.1003非常接近0.1006，0.1008非常接近1.1010。但是，如果放大，则可以判断它们没有重叠。请参阅http://jsfiddle.net/u9xES/555/。