你如何在 c3js 中制作可重用/模板图表答案

【问题标题】：How do you make reusable/template charts in c3js你如何在 c3js 中制作可重用/模板图表
【发布时间】：2015-02-12 12:36:06
【问题描述】：

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

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

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

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

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

【问题讨论】：

为什么不能将图表保存为模板。这就是我所做的。如果我想要一个像我制作的模板一样的，我将图表复制到一个新文件夹，给它一个新名称，放入新数据，就是这样。 CSS，一切都已经完成了。

标签： javascript charts reusability c3

【解决方案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函数。

【讨论】：