Question

如果我按照以下方式创建我的图表，怎样才能显示饼图的图例？

我在C＃中生成我的highcharts饼图数据并将序列化的JSON字符串输出到我的.axpx页面，如下所示：

 plotOptions: {
        pie:
            <%=piechartData%>
    },

这是.aspx.cs代码运行后的饼图的小提琴。该图表看起来像我想要但仍然没有传奇Pie No Legend

当我查看.aspx页面的来源时，整个输出看起来像这样。

$(function() {

var myChart = Highcharts.chart('pieContainer', {

credits: {
  enabled: false
},

title: {
  text: ''
},

legend: {
  labelFormatter: function() {
    return this.rowData.name;
  }
},

tooltip: {
  followPointer: true,
  hideDelay: 100,
  //pointFormat: 'Facilities: {point.y:,.1f} <br>{point.percentage:.1f}%'
  formatter: function() {
    return '<b>' + this.point.name + ':</b><br/> ' + this.y.toLocaleString() + ' Facilities <br/>' + this.percentage.toFixed(1) + ' %';
  }
},

plotOptions: {
  pie: {
    "data": [{
      "y": 6708,
      "name": "Targeted",
      "sliced": false,
      "selected": false,
      "color": "#FF5733",
      "showInLegend": true
    }, {
      "y": 24622,
      "name": "Non-Targeted",
      "sliced": true,
      "selected": true,
      "color": "#D4D3D2",
      "showInLegend": true
    }, {
      "y": 4057,
      "name": "Participating",
      "sliced": false,
      "selected": false,
      "color": "#3EA457",
      "showInLegend": true
    }]
  }
},

series: [{
  type: 'pie',
  name: 'Outside Name',
  dataLabels: {
    enabled: true,
    connectorWidth: 1,
    distance: 25,
    style: {
      color: "contrast",
      fontSize: "11px",
      textOutline: "none", //"1px contrast",
    },
    formatter: function() {
      return this.point.name + ':<br/> ' + this.percentage.toFixed(1) + ' %';
    }
  }
}]
  });
});

Answer 1

这里有3个问题：

如何添加数据：您应该在data中设置series，而不是plotOptions。所以它应该是：

series: {
  data: [...]
  ...
}

您设置showInLegend的位置： series.data没有属性showInLegend，需要按系列或plotOptions设置。那就是：

plotOptions: {
  pie: {
    showInLegend: true
  }
}

格式化图例格式化程序的方式无效。没有属性this.rowData.name，所以我刚删除了它。

通过执行上述操作以及移动dataLabels选项，我们得到以下工作示例： https://jsfiddle.net/sk0tpegp/19/

Highcharts Pie Missing Legend

1 个答案: