javascript - HighChart 堆积柱形条

Question

带 Highcharts 的堆积柱形图。 我怎样才能实现这样的东西？

我在左侧和右侧使用了 4 个具有不同值的附加绘图线，但问题是如何隐藏 y 轴上 Q1 和 Q2 的值并仅显示绘图线？

代码

Highcharts.chart('container', {

  chart: {
    type: "column",
    margin: [100, 120, 30, 100],
    height: 440,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent"
  },
  title: {
    text: "",
    align: "center",
    x: -140,
    y: 12,
    floating: true,
    style: {
      fontSize: "23px",
      fontWeight: "300"
    }
  },
  xAxis: {
    categories: ['Q1 2018', 'Q4 2017'],
    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0
  },
  yAxis: {

    title: {
      text: "Bonus Criteria",
      x: -45,
      opposite: true,
    },
    title: {
      text: ''
    },

    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0,
    tickPosition: "outside",
    labels: {
      align: "left",
      x: -30,
      y: 0
    },
    lineWidth: 1,
    plotLines: [


      {

        color: "black",
        // Average here
        value: 120,
        width: "2",
        label: {
          text: '0',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 2nd criteria for bonus
      {
        color: "green",
        // Average here
        value: 180,
        width: "2",
        label: {
          text: '10,000',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 3rd criteria for bonus
      {
        color: "green",
        // Average here
        value: 240,
        width: "2",
        label: {
          text: '20,000 ',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 4th criteria for bonus
      {
        color: "yellow",
        value: 300,
        width: "2",
        label: {
          text: '30,000',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      }
    ]
  },

  plotOptions: {
    legend: {
      enable: false
    },
    series: {
      stacking: 'normal'
    },
    column: {
      colorByPoint: true
    }
  },
  colors: [
    '#05a0f0',
    '#aaddfa',
  ],
  series: [{
    data: [29.9, 71.5]
  }, {
    data: [144.0, 176.0]
  }, {
    data: [70, 60]
  }],
  dataLabels: {
    enabled: true
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
  },

});

这是一个指向 jsfiddle 的内嵌链接.

Answer 1

使用以下方法旋转 y 轴标签:

yAxis: {
  lables: {
    enabled: false
  },
  ...
}

然后将 plotLines 设置到左侧，如:

yAxis: {
  plotLines: {
    color: "black",
    value: 120,
    width: "2",
    label: {
      text: '0%', //Visible text
      align: "left",  //left axis
      fontWeight: "bold",
      fontSize: "16",
      x: -30, // xAxis offset
      y: 5
    },
    zIndex: 2
  }
...
}

此外，我禁用了图例:

legend: {
  enabled: false
}

这会让你得到与你所追求的非常相似的东西。

---

Highcharts.chart('container', {

  chart: {
    type: "column",
    margin: [100, 120, 30, 100],
    height: 440,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent"
  },
  title: {
    text: "",
    align: "center",
    x: -140,
    y: 12,
    floating: true,
    style: {
      fontSize: "23px",
      fontWeight: "300"
    }
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: ['Q1 2018', 'Q4 2017'],
    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0
  },
  yAxis: {

    title: {
      text: "Bonus Criteria",
      x: -45,
      opposite: true,
    },
    title: {
      text: ''
    },

    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0,
    tickPosition: "outside",
    labels: {
    enabled: false,
      align: "left",
      x: -30,
      y: 0
    },
    lineWidth: 1,
    plotLines: [{
        color: "black",
        // Average here
        value: 120,
        width: "2",
        label: {
          text: '0%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },
        zIndex: 2
      },

      // 2nd criteria for bonus
      {
        color: "green",
        // Average here
        value: 180,
        width: "2",
        label: {
          text: '5%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },

      // 3rd criteria for bonus
      {
        color: "green",
        // Average here
        value: 240,
        width: "2",
        label: {
          text: '10%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },

      // 4th criteria for bonus
      {
        color: "yellow",
        value: 300,
        width: "2",
        label: {
          text: '15%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },{

    color: "black",
    // Average here
    value: 120,
    width: "2",
    label: {
      text: '0',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 2nd criteria for bonus
  {
    color: "green",
    // Average here
    value: 180,
    width: "2",
    label: {
      text: '10,000',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 3rd criteria for bonus
  {
    color: "green",
    // Average here
    value: 240,
    width: "2",
    label: {
      text: '20,000 ',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 4th criteria for bonus
  {
    color: "yellow",
    value: 300,
    width: "2",
    label: {
      text: '30,000',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  }
    ]
  },

  plotOptions: {
    legend: {
      enable: false
    },
    series: {
      stacking: 'normal'
    },
    column: {
      colorByPoint: true
    }
  },
  colors: [
    '#05a0f0',
    '#aaddfa',
  ],
  series: [{
    data: [29.9, 71.5]
  }, {
    data: [144.0, 176.0]
  }, {
    data: [70, 60]
  }],
  dataLabels: {
    enabled: true
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
  },

});

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

工作示例: https://jsfiddle.net/ch17r8df/20/