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

标签 javascript php charts c3.js

如何更改饼图图例的文本。我在我的 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 

    });

它不显示我的图例值,它总是只显示列作为图例。

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

最佳答案

您还没有提供从您的 php 输出的数据,所以很难说。

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

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

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

这是一个 fiddle : 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'
    }
}

关于javascript - 我如何更改c3饼图中的图例文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30191582/

相关文章:

javascript - 如何从 Canvas /图表中删除左右填充?

javascript - C3.js圆环图添加多个标题

javascript - ASP.NET/JavaScript - 为什么 "Return False"不阻止回发?

使用循环打印 PHP 数组

javascript - 原型(prototype)添加事件监听器

php - 需要 echo 来评估变量两次。从 mySQL 数据库中获取变量名,然后解析该变量

PHP 数组和数组对象

javascript - ZingChart 条形空间不起作用

javascript - Jquery datetimepicker 第一次在不同位置打开

javascript - 如何同时导入组件和 props 类型别名?