c3.js自定义借文问题

时间:2016-10-21 04:59:53

标签: javascript c3.js

我正在使用C3.js,需要在图例中显示自定义图例文本,而不是data1,data2等。所以我使用了name属性,但仍然没有出现自定义的图例文本。

以下是我的代码:

$scope.chart1 = {
        size: {
            height: 175
                // width: 480
        },
        data: {
            type: 'pie',
            columns: [
                ['data1', 45],
                ['data2', 100],
                ['data3', 60],
                ['data4', 5]
            ]
        },
        tooltip: {

        },
        legend: {
            show: true,
            position: 'right'
        },
        names: {
            'data1': 'warning',
            'data2': 'success',
            'data2': 'info',
            'data2': 'danger'
        } 
    };

任何人都可以帮助显示自定义图例文本的正确方法吗?

1 个答案:

答案 0 :(得分:1)



var chart = c3.generate({
    padding: {
        top: 10,
        right: 0,
        bottom: 10,
        left: 0,
    },
    data: {
        columns: [ ['data1', 45],
                ['data2', 100],
                ['data3', 60],
                ['data4', 5]],
        type: 'pie',
        labels: true,
      names:{
            'data1': 'warning',
            'data2': 'success',
            'data2': 'info',
            'data2': 'danger'
    }
    }
    //But these legend values or not showing 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />
&#13;
&#13;
&#13;