javascript - Highcharts 条形和线条问题

Question

我正在使用 highcharts 创建条形图和折线图来显示预算与实际之间的差异

我遇到的问题是，当我用条形图制作样条图时，这些点似乎与它们应该在的位置没有任何相关性。因此 2 月份的预算为 20.9，但条形图显示高于 30。

所有的条形图(列)似乎都太高了，即使在工具提示中显示了正确的数据

http://jsfiddle.net/ktcle/kSLGL/

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: null
        },

        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}£m',
                style: {
                    color: '#666666'
                }
            },
            title: {
                text: null,
                style: {
                    color: '#45C2C5'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Budget',
                text: null

            },
            labels: {
                 enabled: false
            },
            opposite: true,

        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 170,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Budget',
            color: '#4A3950',
            type: 'column',
            yAxis: 1,
            data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5],
            tooltip: {
                valueSuffix: '£'
            }

        }, {
            name: 'Actual',
            color: '#45C2C5',
            type: 'spline',
            data: [24.5, 22.5, 30 ],
            tooltip: {
                valueSuffix: '£'
            },

            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }]
    });

});

Answer 1

因为您有两个 y 轴，所以删除第二个 y 轴，并在系列中删除属性 yAxis: 1 或更改为 yAxis: 0

Jsfiddle

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: null
    },

    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}£m',
            style: {
                color: '#666666'
            }
        },
        title: {
            text: null,
            style: {
                color: '#45C2C5'
            }
        }
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 170,
        floating: true,
        backgroundColor: '#FFFFFF'
    },
    series: [{
        name: 'Budget',
        color: '#4A3950',
        type: 'column',
        yAxis: 0,
        data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5],
        tooltip: {
            valueSuffix: '£'
        }

    }, {
        name: 'Actual',
        color: '#45C2C5',
        type: 'spline',
        data: [24.5, 22.5, 30 ],
        tooltip: {
            valueSuffix: '£'
        },

        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]
});

});