highcharts - 在一个容器中使用多个饼图时如何对齐高图图例？

Question

嗨，我使用 HighCharts 在一个容器中有两个饼图。

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        series: {
        dataLabels: {
            enabled: false
        }
      }
    },
    series: [{
        size: '50%',
        center: ['25%', '50%'],
        data: [1, 2, 3, 4, 5, 6],
        showInLegend: true,
    }, {
        size: '50%',
        center: ['75%', '50%'],
        data: [1, 2, 3, 4, 5, 6],
        showInLegend: true,
    }]
});

http://jsfiddle.net/f9dLhuv0/

现在我想对齐每个饼图图例，以便用户可以区分哪个图例属于哪个饼图。

如何解决这个问题？

谢谢

标签： highcharts

Answer 1

目前，这是不可能的。图表上只能有一个图例。

作为一种解决方法，您可以将它们拆分为单独的容器：

Highcharts.chart('container1', {
  chart: {
    type: 'pie'
  },
  title: {
    text: ''
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      }
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    size: '80%',
    data: [1, 2, 3, 4, 5, 6],
    showInLegend: true,
  }]
});

Highcharts.chart('container2', {
  chart: {
    type: 'pie'
  },
  title: {
    text: ''
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      }
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    size: '80%',
    data: [1, 2, 3, 4, 5, 6],
    showInLegend: true,
  }]
});

#container1 {
  width: 50%;
  float: left;
}

#container2 {
  width: 50%;
}

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

演示：

• http://jsfiddle.net/BlackLabel/x9pc38za/