【问题标题】:Highcharts multiple series and axes types overlappingHighcharts 多个系列和轴类型重叠
【发布时间】:2013-12-22 06:53:38
【问题描述】:

关于多个轴的重叠,我对 highcharts 图表有疑问。 系列有2种类型,一种类型柱和一种类型线。我希望线型始终位于其他线型之上,并且永远不会与它们相交。

您可能会在这里看到我的问题: http://jsfiddle.net/99tC7/

期待您提供的任何帮助。

$('#container').highcharts({
        title: {
            text: 'Title',
            x: -20 //center
        },
        xAxis: {
            categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
            labels: {
                rotation: 270
            }
        },
        yAxis: [{
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            title:{
                text: "Number 1"
            },
        },
        {
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            title:{
                text: "Number 2"
            },
            opposite: true,
            max:50,
            minPadding:5,
        }],
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                            return this.y +'%';
                    }
                }
            },
            column: {                    
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                            return this.y;
                    }
                }
            }
        },
        series: [{
            name: 'L1',
            type: 'column',
            color: '#FF0000',
            yAxis: 0,
            data: [1, 5, 9, 10, 12]
            },
            {
            name: 'L2',
            type: 'column',
            color: '#00FF00',
            yAxis: 0,
            data: [16, 16, 106, 12, 11]
            },
            {
            name: 'L3',
            yAxis: 1,
            data: [38, 24, 37, 29, 37]
            }
        ]
    });

【问题讨论】:

    标签: highcharts overlap overlapping series axes


    【解决方案1】:

    您可以尝试在两个 yAxis 中设置正确的 min/max 值,例如这里 http://jsfiddle.net/99tC7/1/

    【讨论】:

    • 嗯,百分比系列的值在 [0,100] 中,但列没有最大范围,只有最小值为 0。不是解决方案。
    • 为什么不从你的集合中较大的值确定最大值,然后乘以这个值。例如,如果您有一组 10 个值并且较大的是 5000。取这个值 X2 = 10000 并将这个值分配给 max 属性。
    猜你喜欢
    • 2013-12-06
    • 2012-11-30
    • 1970-01-01
    • 1970-01-01
    • 2013-05-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-23
    相关资源
    最近更新 更多