javascript - 如何在 c3js 中制作可重用/模板图表

Question

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

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

我发现的唯一与此相关的东西是 concept on making reusable charts在 D3.js(d3js.org) 中，C3.js 使用的底层库，以及 implementation受到这个概念的启发。这并没有真正帮助我，因为我想要 C3.js 提供的更高级别的抽象，但这些可能会让您了解我正在寻找什么。

我没有找到这方面的信息，但一个想法是创建一个基于现有类型的图表类型，但还包括额外的配置(例如，基于现有的“创建一个名为“horizo​​ntalbar”的新图表类型)条形图类型)。

这是我制作的图表，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>

Answer 1

我的 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函数。