Как выровнять легенду старшей диаграммы при использовании нескольких круговых диаграмм в одном контейнере?

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/

Прямо сейчасЯ хочу выровнять каждую легенду круговой диаграммы, чтобы пользователь мог различить, какая легенда принадлежит какой круговой диаграмме.

Как решить эту проблему?

Спасибо

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/