如何更改 c3 饼图中的图例文本

Question

如何更改饼图图例的文本。我在我的 php 页面中使用 c3 图表。我已经阅读了 c3 图表的文档，但没有运气。

目前我正在使用此代码显示true 的图例，但我无法更改我尝试过的文本。

var chart = c3.generate({
        bindto: '#container',
        padding: {
                  top: 10,
                  right: 0,
                  bottom: 10,
                  left: 0,
            },
        data: {
            columns: [<?php echo $pieChartDataString; ?>],
            type : 'pie',
            labels: true
        },
        legend: {
                show: true,
                position: 'upper-center'
                format: {
                        title: function () { return "Legend title"; },
                        name : function () { return "Legend name"; },
                        value: function () { return "Legend value";}
                        }
                }

   //But these legend values or not showing 

    });

它没有显示我的图例值，它总是只显示列作为图例。

有什么方法可以更改图例值。

Answer 1

你没有提供从你的php输出的数据，所以很难说。

但每个列数组中的第一项决定了图例中的名称。所以：

columns: [
    ['this is legend 1', 30],
    ['put your value here', 120], 
]

将导致图例标签为“这是图例 1”和“将您的值放在这里”。

这是一个小提琴： http://jsfiddle.net/jrdsxvys/9/

编辑... 另一种选择是使用 names 属性，如下所示： http://jsfiddle.net/jrdsxvys/40/

data: {
    columns: [
      ['d1', 30],
      ['d2', 120]
    ],
    type: 'pie',
    labels: true,
    names: {
      d1: 'some name here',
      d2: 'another name'
    }
}

Answer 2

@agpt 是的。 names 属性通常是一个很好的方法，因为列数据数组的第一个属性，例如上面的“d1”，在执行诸如在图表上具有多种类型之类的操作时使用。例如，对于使用types 而不是type: 'pie' 的条形和线条组合：

columns: [
   ['bar_1', 3, 8, 6],
   ['bar_2', 4, 0, 7],
   ['bar_3', 2, 3, 0] 
],

types: {
  bar_1: 'bar',
  bar_2: 'line',
  bar_3: 'bar'
},

names : {
      bar_1: 'Initial',
      bar_2: '3 month',
      bar_3: '6 month'                
}

因此，使用 names 属性可以让您使用更多“动态”属性名称，并在整个配置中保持一致。