javascript - Highcharts:双面传奇

Question

我正在尝试使用 Highcharts 显示公司的 Assets 负债表。

我想像这样将图例放在左侧和右侧。

我找不到这样做的方法。

请帮助我

Answer 1

您可以使用以下方法实现它:

设置适当的图例选项:

legend: {
    floating: true,
    align: 'left',
    itemMarginBottom: 15,
    width: 200,
    padding: 0
}

然后，图例将呈现为两列。在render事件回调中循环遍历图表系列，并将translateX属性大于0的每个图例元素转换到图表的另一侧。请注意，应设置图表边距(左侧和右侧)。检查下面发布的代码和演示。

Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginLeft: 150,
    marginRight: 100,
    spacingLeft: 10,
    events: {
      render: function() {
        var chart = this,
          offsetLeft = 20,
          element,
          itemX,
          translateX,
          translateY;

        chart.series.forEach(function(series) {
          element = series.legendItem.parentGroup;
          translateY = element.translateY;

          if (element.translateX > 0) {
            translateX = chart.plotWidth + chart.plotLeft + offsetLeft;

            element.translate(translateX, translateY);
          }
        });
      }
    }
  },
  legend: {
    floating: true,
    align: 'left',
    itemMarginBottom: 15,
    width: 200,
    padding: 0
  },
  series: [
    { data: [6, 4, 2], name: 'First' },
    { data: [7, 3, 2], name: 'Second' },
    { data: [9, 4, 8], name: 'Third' },
    { data: [1, 2, 6], name: 'Fourth' },
    { data: [4, 6, 4], name: 'Fifth' },
    { data: [1, 2, 7], name: 'Sixth' },
    { data: [4, 2, 5], name: 'Seventh' },
    { data: [8, 3, 2], name: 'Eighth' },
    { data: [4, 5, 6], name: 'Ninth' },
    { data: [6, 4, 2], name: 'First' },
    { data: [7, 3, 2], name: 'Second' },
    { data: [9, 4, 8], name: 'Third' },
    { data: [1, 2, 6], name: 'Fourth' },
    { data: [4, 6, 4], name: 'Fifth' },
    { data: [1, 2, 7], name: 'Sixth' },
    { data: [4, 2, 5], name: 'Seventh' },
    { data: [8, 3, 2], name: 'Eighth' },
    { data: [4, 5, 6], name: 'Ninth' }
  ]
});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

API引用

• https://api.highcharts.com/highcharts/chart.events.render
• https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
• https://api.highcharts.com/highcharts/chart.marginLeft
• https://api.highcharts.com/highcharts/chart.marginRight