1

我正在尝试使用 C3.js(c3js.org) 制作图表，但我想指定除数据（以及该图表特有的任何其他微小偏差）之外的所有内容，然后将其重新用于该变体的所有图表（a图表的具体配置）。

我为 C3.js 找到的所有文档和所有示例仅涉及如何制作单个图表。将其应用于多个图表意味着大量重复代码，并且在进行更改时不能确保一致性。

我发现的唯一与此相关的是在 D3.js(d3js.org) 中制作可重用图表的概念， C3.js 使用的底层库，以及受该概念启发的实现。这并没有真正帮助我，因为我想要 C3.js 提供的更高级别的抽象，但这些可能会让您知道我在寻找什么。

我没有找到这方面的信息，但一个想法是制作一个基于现有类型但还包括额外配置的图表类型（例如，根据现有的“条形”图表制作一个名为“水平条”的新图表类型类型）。

这是我制作的一个图表，bindto是columns这个图表的独特部分，其余部分应该是模板的一部分，但我不知道如何。

var chart = c3.generate({
 bindto: '#chart',
data: {
    columns: [
        ['data1', 125.2],
        ['data2', 282.7],
        ['data3', 3211.1],
        ['data4', 212.2],
        ['data5', 131.1], 
        ['data6', 329.7]
    ],
    type: 'pie',
    order: null
},
pie: {
    label: {
        format: function (value, ratio, id) {
            return d3.format('.1f')(ratio*100)+'%'; //percent with one decimal
        }
    }
},
tooltip: {
    format: {
        value: function (value, ratio, id, index) {
            return value+'mkr ('+d3.format('.1f')(ratio*100)+'%)'; //example: 155.2mkr (3.3%)
        } 
    }
},
legend: {
    item: {
        onclick: function () {} //disable clicking to hide/show parts of the chart
    }
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<div id="chart"></div>

4

1 回答 1

0

我的 html 中有这个：

<script src="../static/js/test.js"></script> <!-- this is the js file contains the drawChart function --> 

<div class='chart'>
    <div id='chart1'></div>
</div>
<script>drawChart('chart1','pathToCsvData',ture, 200);</script>

在我的 js 代码中：

function drawChart(toChart,dataURL,showLegend,chartHeight)
{   
    var chart1 = c3.generate({
        bindto: toChart,
        data: {
            url: dataURL,
            labels: false
        },
        color: {pattern: ['green','black']},
        zoom: {enabled: false},
        size: {height: chartHeight},
        transition: {duration: 0},
        legend: {show: showLegend}
    });
}

js代码作为模板，我可以任意多不同的模板，把它们放在函数中，自定义图表参数，在html代码中调用js函数。

于 2015-06-25T14:02:33.177 回答