Реагировать на высокие графики, показывать легенды в виде бара

Question

Этот код отображает условные обозначения в виде круга, <<< <p>. Я хочу отобразить условные обозначения в виде столбца, как показано на рисунке ниже.

Мое требование - условные обозначения должны отображаться в виде столбцов вместо кружков

Здесь вы можете взглянуть на мой код:

Highcharts.chart('flow', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
          width: 500,
          height: 260,
          style:{
            marginBottom:"30px"
          }
        },
        title: {
          text: 'Flow',
          x: 90,
          y: 80,
          style:{
            fontSize:"25px",
            fontWeight:600
          }
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              distance:-30,
              color:'white',
              fontSize:'9px',
              format: '{point.percentage:.1f} %',
              style: {
                textOutline: false 
              }
            },
            showInLegend: true
          }
        },
        credits: {
          enabled: false
        },
    legend: {
      align: 'right',
      layout: 'vertical',
      verticalAlign: 'middle', 
      x: -100,
      y: 90,
    },
    series: [{
      name: 'Flow',
      colorByPoint: true,
      data: [{
        name: 'Owned',
        y: 74,
        color:"#f5990f"
      },{
        name: 'Invited',
        y: 36,
        color:"#fce61e"
      }]
    }]
});

Highcharts.chart ('flow', {chart: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, тип: 'pie', ширина: 500, высота: 260, стиль: {marginBottom: "30px"}}, заголовок: {text: 'Flow', x: 90, y: 80, style: {fontSize: "25px", fontWeight: 600}}, подсказка: {pointFormat: '{series.name}: {point.percentage: .1f}% '}, plotOptions: {pie: {allowPointSelect: true, курсор:' указатель ', dataLabels: {enabled: true, расстояние: -30, цвет:'white', fontSize: '9px', формат: '{point.percentage: .1f}%', стиль: {textOutline: false}}, showInLegend: true}}, кредиты: {enabled: false}, легенда: {выровнять: «вправо», макет: «вертикальный», вертикальныйAlign: «средний», x: -100, y: 90,}, серия: [{name: 'Flow', colorByPoint: true, данные: [{name: 'Owned ', y: 74, цвет: "# f5990f"}, {name:' Invited ', y: 36, colили: "# fce61e"}]}]});

Буду признателен за любую помощь, которую я могу получить для достижения этой цели. Спасибо!

Answer 1

Вы можете создать дополнительные column диаграммы и разместить их под элементами легенды:

chart: {
    events: {
        load: function() {
            var columnChart1 = Highcharts.chart("columnChart1", columnChartOptions),
                columnChart2,
                xPos = this.legend.group.translateX,
                yPos = this.legend.group.translateY,
                items = this.legend.allItems;

            columnChartOptions.series[0].data = [76];
            columnChartOptions.series[0].color = 'yellow';
            columnChart2 = Highcharts.chart("columnChart2", columnChartOptions);

            columnChart1.renderTo.style.top = yPos + 50 + 15 + items[0]._legendItemPos[1] + 'px';
            columnChart1.renderTo.style.left = xPos + 'px';

            columnChart2.renderTo.style.top = yPos + 50 + 15 + items[1]._legendItemPos[1] + 'px';
            columnChart2.renderTo.style.left = xPos + 'px';
        }
    }
}

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/wsc4be92/