HighCharts

Question

我使用 HighCharts 的第二个 yAxis 有问题。样条图正确缩放，但条形图（第二个 yAxis）没有。请注意，条形图有两个部分 - 不相关的部分是不可见的。

http://jsfiddle.net/warricksmith/jqvxf30z/1/

    $(function () {
$('#container').highcharts({
    chart: {
        alignTicks: false,
        backgroundColor: null,
        spacingBottom: 6,
        spacingLeft: 2,
        spacingRight: 2,
        spacingTop: 2
    },
    credits: {
        enabled: false
    },
    global: {
        useUTC: false
    },
    legend: {
        align: "center",
        enabled: true,
        layout: "horizontal",
        verticalAlign: "bottom",
        y: 5
    },
    navigator: {
        enabled: false,
        height: 40,
        series: {
            color: "#21B567"
        }
    },
    plotoptions: {
        column: {
            borderwidth: 0
        },
        line: {
            lineWidth: 1,
            marker: {
                enabled: false
            }
        },
        series: {
            pointInterval: null,
            pointStart: null
        },
        spline: {
            lineWidth: 2,
            marker: {
                enabled: true
            }
        }
    },
    rangeselector: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },

    series: [{
        name: 'Peak Demand',
        stacking: null,
        title: 'kVA',
        type: 'spline',
        color: "#FF6F34",
        data: [821,
        794,
        737,
        748,
        778,
        794,
        889,
        831,
        819,
        821,
        821,
        877],
        tooltip: {
            valueSuffix: 'kVA'
        }

    }, {
        name: "Power at peak",
        stacking: null,
        title: "kVA",
        tooltip: {
            valueSuffix: " kVA"
        },
        type: "spline",
        color: "#33BAE3",
        data: [788,
        770,
        722,
        733,
        747,
        755,
        747,
        814,
        803,
        804,
        805,
        737]


    }, {
        color: "#339A63",
        data: [
        0.04,
        0.03,
        0.02,
        0.02,
        0.04,
        0.05,
        0.16,
        0.02,
        0.02,
        0.02,
        0.02,
        0.16],
        name: "Power factor (lagging)",
        stacking: 'normal',
        title: "",
        tooltip: {
            valueSuffix: " "
        },
        type: "column",
        yAxis: 1
    }, {
        color: "rgba(245,241,232,0)",
        data: [
        0.96,
        0.97,
        0.98,
        0.98,
        0.96,
        0.95,
        0.84,
        0.98,
        0.98,
        0.98,
        0.98,
        0.84, ],
        name: "Power factor (leading)",
        stacking: "normal",
        title: "",
        tooltip: {
            valueSuffix: " "
        },
        type: "column",
        yAxis: 1
    }, ],

    title: {
        text: 'Peak Demand and Power factor'
    },
    subtitle: {
        text: 'Power-Star'
    },
    xAxis: [{
        categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14',
            'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'],
        lables: {
            style: {
                fontSize: "12px",
                fontWeight: "bold"
            }
        },
        tickPixelInterval: 150,
        tickPosition: "inside",
        type: "category"
    }],
    yAxis: [{ // Primary yAxis
        gridLineWidth: 1,
        index: 0,
        labels: {
            style: Object,
            y: 10
        },
        max: undefined,
        maxPadding: null,
        min: undefined,
        opposite: false,
        title: {
            text: "kVA"

        }
    }, {
        gridLineWidth: 0,
        index: 1,
        labels: {
            enabled: false
        },
        max: undefined,
        maxPadding: null,
        min: undefined,
        opposite: false,
        showLastLabel: false,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 2,
        labels: {
            y: 10
        },
        max: 1,
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 3,
        labels: {
            enabled: false
        },
        max: "1",
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        showLastLabel: false,
        title: {
            text: ""
        }
    }, {
        gridLineWidth: 0,
        index: 4,
        labels: {
            enabled: false
        },
        max: "1",
        maxPadding: 0,
        min: 0.8,
        opposite: true,
        showLastLabel: false,
        title: {
            text: ""
        }
    }],
    tooltip: {
        shared: true
    },
});

});

Answer 1

问题是你的 y 轴太多了，所以你弄错了。您正在将系列连接到 yAxis: 1，这意味着选项中的第二个 yAxis。同时，您正在为第三、第四和第五个 yAxes 设置 min 和 max，并仅为第三个启用标签..

固定演示：http://jsfiddle.net/jqvxf30z/2/

我为系列设置了 yAxis: 2，因为 yAxis 很可能负责列。

HighCharts - 第 2 个 y 轴图未正确缩放

HighCharts - 2nd yAxis graphs not scaling correctly