highcharts - 未显示饼图图例

时间:2013-06-06 08:50:39

标签: highcharts pie-chart

我的系列数据如下: -

[{"name":"Calculated Profit","data":[{"y":90,"rowData":{"Salesperson":"Dr. Gary Barlow","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}},{"y":90,"rowData":{"Salesperson":"Fr. G R Blue","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}},{"y":3332.8908,"rowData":{"Salesperson":"Miss Lynsey A Carr","EP":3332.89080,"AP":9252.84214,"CP":3332.89080,"Retries":3}},{"y":157.5,"rowData":{"Salesperson":"Mr. G WALTON","EP":157.50000,"AP":472.50000,"CP":157.50000,"Retries":1}},{"y":90,"rowData":{"Salesperson":"Mr. Jason Orange","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}},{"y":3746.35416,"rowData":{"Salesperson":"Mr. Joe Bloggs","EP":3746.35416,"AP":11239.06249,"CP":3746.35416,"Retries":1}},{"y":90,"rowData":{"Salesperson":"Prof. Howard Donald","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}},{"y":90,"rowData":{"Salesperson":"Prof. T V Smith","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}},{"y":90,"rowData":{"Salesperson":"RtHon. H Q Brown","EP":90.00000,"AP":390.00000,"CP":90.00000,"Retries":1}}]}]

我的图表plotOptions如下: -

plotOptions: {

                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true
                        },
                        tooltip: {
                            pointFormat: '{series.data.rowData.Salesperson}: <b>{point.percentage}%</b>',
                            percentageDecimals: 1
                        },
                        showInLegend: true

                }

任何指针..如图例显示为{series.data.rowData.Salesperson}

2 个答案:

答案 0 :(得分:0)

很遗憾,您需要使用tooltip.formatter,而不是pointFormat。 PointFormat是一个简单的regexp,只检查点/系列之后的第一个元素,并将其作为键与点/系列对象进行比较。

答案 1 :(得分:0)

要将图例标签设置为销售员,您可以在与图表相同的级别上使用legend.labelFormatter回调函数,请参阅完整link to fiddle

  legend: {
    labelFormatter: function() {
      return this.rowData.Salesperson;
    }
  },
  tooltip: {
    formatter: function() {
        return '<b>' + this.point.rowData.Salesperson + '</b> ' + Highcharts.numberFormat(this.point.percentage, 1) +' %';
    },
    percentageDecimals: 1
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        formatter: function() {
          return this.point.rowData.Salesperson;
        }
      },
      showInLegend: true
    }
  }