如何在C3饼图中更改图例文本 [英] How can i change text of legend in c3 pie chart

问题描述

如何更改饼图图例的文本。我在我的PHP页面中使用c3图表。我已经看过c3图表的文档，但是没有运气。

How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.

当前我正在使用此代码，它以 true ，但我无法更改尝试过的文本。

Currently i am using this code it show legend for true but I not able to change the text I have tried this.

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 

    });

它没有显示我的图例值，它始终仅将列显示为图例。

It's not showing my legend values its always shows only columns as legend.

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

Is there any way that I can change the legend values.

推荐答案

您尚未提供从您的PHP输出的数据，所以很难说。

You haven't provided the data that gets outputted from your php, so it's hard to say.

但是每个columns数组中的第一项决定了图例中使用的名称。因此：

But the first item in each of the columns array determines the name that goes in the legend. So:

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

将导致图例标签被这是图例1，然后在此处输入您的价值。

would result in the legend labels being "this is legend 1" and "put your value here".

这里是一个小提琴：
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'
    }
}

这篇关于如何在C3饼图中更改图例文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！