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属性可以使用更多“动态”属性名称，并在整个配置中保持一致。

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

2 个答案: