折线图未按比例绘制

时间:2014-05-16 19:53:41

标签: javascript highcharts

这个图表是否有任何不按比例绘制的方式?

http://forum.highcharts.com/resources/image/4227

我需要每个点均匀占据一行。

也就是说,在此图中,每个系列的前两个点应该出现一行,每个系列之间的垂直距离应该与下面几行之间的距离相同。

系列是动态加载的,每个系列的点数是可变的。

http://jsfiddle.net/fpanci/yL6mw/

$(function () {
    $(document).ready(function() {
        $("#container").highcharts({
            chart: {
                inverted: true,
                spacingLeft: 0,
                spacingRight: 0
            },
            title: {
                text: ' ',
                x: -20 //center
            },
            xAxis: {
                minorGridLineColor: '#000000',
                minorGridLineWidth: 1,
                minorTickLength: 0,
                minorTickInterval: 1,
                tickInterval: 1,
                labels: { enabled: true },
                maxPadding: 0.05,
                min: 0
            },
            yAxis: {
                title: { text: ' ' },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#C0C0C0'
                }],
                labels: { enabled: true },
                minorGridLineWidth: 1,
                minorTickLength: 0,
                minorTickInterval: 20,
                tickInterval: 20,
                min: 0,
                max: 100
            },
            exporting: { enabled: false },
            tooltip: { enabled: false },
            legend: { enabled: false },
            series: [{
                color: '#0000FF',
                connectNulls: true,
                data: [[0.2, 24.25], [0.5, 30.61], [1, 43.61], [2, 34.51], [3, 32.39], [4, 36.47], [5, 36.4], [6, null], [7, 24.68], [8, 37.79]]
            },{
                color: '#980000',
                dashStyle: 'shortdot',
                connectNulls: true,
                data: [[0.2, 38], [0.5, 52], [1, 50], [2, null], [3, 32], [4, null], [5, 34], [6, null], [7, 25], [8, null]]
            },{
                color: '#38761D',
                dashStyle: 'ShortDashDotDot',
                connectNulls: true,
                data: [[0.2, 20], [0.5, 27], [1, 35], [2, null], [3, 29], [4, null], [5, 30], [6, null], [7, 22], [8, null]]
            }]
        });
    });
});

谢谢!

1 个答案:

答案 0 :(得分:0)

数据正准确地描绘了你告诉它的地方。 每个数据集中的前2个x值分别为0.2和0.5 - 这就是绘制点的位置。

如果您不希望以这种方式绘制它们,只需从数据中删除x值,它们就会按顺序绘制。

Example

如果你想要0.2和0.5作为轴标签,但希望它们均匀间隔,你需要使用x轴的类别。

Example