如何让 highcharts 组合列分散工作？

Question

尝试创建一个包含 3 个列系列和 1 个散点系列的组合图；列应该是 100% 并散布在上面。当我使用 plotOptions: {column: {stacking: "percent"} 时，列在绘图区域中最大化，但散点系列进入图表底部；当用 plotOptions: {column: {stacking: "normal"} 替换时，它显示得很好，但列没有最大化绘图区域。想法？

Highcharts.chart('container', {
        chart: {
        ignoreHiddenSeries: false,
        backgroundColor: "#FFFFFF",
        width: 509,
        height: 400,
        borderColor: "#FFFFFF",
        borderWidth: 1,
        plotShadow: false
    },
    title: {
        text: "Your organization in comparison",
        style: {color: "#333333", fontFamily: "Arial", fontSize: 16, fontWeight: "bold"}
    },
    legend: {
        enabled: true,
        verticalAlign: "bottom",
        align: "center",
        symbolRadius: 0,
        style: {color: "#333333", fontFamily: "Arial", fontSize: 13}
    },
    plotOptions: {
        column: {stacking: "percent"},
//        column: {stacking: "normal"},
        series: {animation: true}},
    tooltip: {enabled: false},
    yAxis: {title: {text: null}, labels: {enabled: false}, gridLineWidth: 0, reversedStacks: false},
    xAxis: {
        title: {text: null},
        categories: ['Experience', 'Security', 'Management'],
        labels: {enabled: true, style: {color: "#333333", fontFamily: "Arial", fontSize: 13}},
        gridLineWidth: 0,
        reversedStacks: false
    },
    series: [{
        type: "column",
        name: "Low",
        invertIfNegative: false,
        color: "#002E73",
        showInLegend: true,
        data: [{y: 0.42}, {y: 0.42}, {y: 0.48}],
        dataLabels: {
            enabled: false,
            verticalAlign: "top",
            style: {color: "#FFFFFF", fontFamily: "Arial", fontSize: 13, textOutline: ""}
        }
    }, {
        type: "column",
        name: "Medium",
        invertIfNegative: false,
        color: "#297EFF",
        showInLegend: true,
        data: [{y: 0.37}, {y: 0.47}, {y: 0.36}],
        dataLabels: {enabled: false}
    }, {
        type: "column",
        name: "High",
        invertIfNegative: false,
        color: "#B8D4FF",
        showInLegend: true,
        data: [{y: 0.21}, {y: 0.11}, {y: 0.16}],
        dataLabels: {enabled: false}
    }, {
        type: "scatter",
        name: "Your organization today",
        invertIfNegative: false,
        color: "#FFC000",
        lineWidth: 0,
        marker: {enabled: true, radius: 14},
        states: {hover: {lineWidthPlus: 0}},
        showInLegend: true,
        data: [{y: 0.21}, {y: 0.21}, {y: 0.24}],
        dataLabels: {enabled: false}
    }],
    credits: {enabled: false}
})

 

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>

Answer 1

您应该使用多轴来制作组合图表。

在此处参考有关 YAxis 的文档：http://api.highcharts.com/highcharts/yAxis

我已将您的代码修复如下。请尝试！

Highcharts.chart('container', {
  chart: {
    ignoreHiddenSeries: false,
    backgroundColor: "#FFFFFF",
    width: 509,
    height: 400,
    borderColor: "#FFFFFF",
    borderWidth: 1,
    plotShadow: false
  },
  title: {
    text: "Your organization in comparison",
    style: {
      color: "#333333",
      fontFamily: "Arial",
      fontSize: 16,
      fontWeight: "bold"
    }
  },
  legend: {
    enabled: true,
    verticalAlign: "bottom",
    align: "center",
    symbolRadius: 0,
    style: {
      color: "#333333",
      fontFamily: "Arial",
      fontSize: 13
    }
  },
  plotOptions: {
    column: {
      stacking: "percent"
    },
    //       column: {stacking: "normal"},
    series: {
      animation: true
    }
  },
  tooltip: {
    enabled: false
  },

  // Create Multiple axes
  yAxis: [{
    title: {
      text: null
    },
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    reversedStacks: false
  }, {
    title: {
      text: null
    },
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    reversedStacks: false
  }],

  xAxis: {
    title: {
      text: null
    },
    categories: ['Experience', 'Security', 'Management'],
    labels: {
      enabled: true,
      style: {
        color: "#333333",
        fontFamily: "Arial",
        fontSize: 13
      }
    },
    gridLineWidth: 0,
    reversedStacks: false
  },
  series: [{
    type: "column",
    name: "Low",
    invertIfNegative: false,
    color: "#002E73",
    showInLegend: true,
    data: [{
      y: 0.42
    }, {
      y: 0.42
    }, {
      y: 0.48
    }],
    dataLabels: {
      enabled: false,
      verticalAlign: "top",
      style: {
        color: "#FFFFFF",
        fontFamily: "Arial",
        fontSize: 13,
        textOutline: ""
      }
    }
  }, {
    type: "column",
    name: "Medium",
    invertIfNegative: false,
    color: "#297EFF",
    showInLegend: true,
    data: [{
      y: 0.37
    }, {
      y: 0.47
    }, {
      y: 0.36
    }],
    dataLabels: {
      enabled: false
    }
  }, {
    type: "column",
    name: "High",
    invertIfNegative: false,
    color: "#B8D4FF",
    showInLegend: true,
    data: [{
      y: 0.21
    }, {
      y: 0.11
    }, {
      y: 0.16
    }],
    dataLabels: {
      enabled: false
    }
  }, {
    yAxis: 1, // Define axis will be use here
    type: "scatter",
    name: "Your organization today",
    invertIfNegative: false,
    color: "#FFC000",
    lineWidth: 0,
    marker: {
      enabled: true,
      radius: 14
    },
    states: {
      hover: {
        lineWidthPlus: 0
      }
    },
    showInLegend: true,
    data: [{
      y: 0.21
    }, {
      y: 0.21
    }, {
      y: 0.24
    }],
    dataLabels: {
      enabled: false
    }
  }],
  credits: {
    enabled: false
  }
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>