React highcharts，将图例显示为条形图

Question

此代码将图例显示为圆圈，<<<

我想将图例显示为条形，如下图所示。

我的要求是图例应显示为条形而不是圆圈

这里你可以看看我的代码：

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', { 图表： { plotBackgroundColor：空， plotBorderWidth：空，情节阴影：假的，类型：'pie'，宽度：500，身高：260，风格：{ marginBottom:"30px" } }, 标题： { 文本：'Flow'， ×：90，是：80，风格：{ 字体大小：“25px”， fontWeight:600 } }, 工具提示：{ pointFormat: '{series.name}: {point.percentage:.1f}%' }, 绘图选项：{ 馅饼：{ allowPointSelect：真，光标：'pointer'，数据标签：{ 启用：真，距离：-30，颜色:'white', fontSize:'9px', 格式：'{point.percentage:.1f} %', 风格： { 文本大纲：假 } }, showInLegend：真 } }, 学分：{ 启用：假 }, 传奇： { 对齐：'right'，布局：'vertical'，垂直对齐：'middle'， ×：-100，是：90， }, 系列： [{ 姓名：'Flow', colorByPoint：真，数据： [{ 姓名：'Owned', 是：74，颜色：“#f5990f” },{ 姓名：'Invited', 是：36，颜色：“#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/

React highcharts，将图例显示为条形图

React highcharts, show legends as bar

highcharts

pie-chart

react-highcharts