基于 D3 的 Meteor C3 图表 - 多个图表？答案

【问题标题】：Meteor C3 charts based on D3 - multiple charts?基于 D3 的 Meteor C3 图表 - 多个图表？
【发布时间】：2014-12-14 10:32:00
【问题描述】：

编辑：克隆此存储库以进行非工作复制。 https://github.com/FickleLife/meteor-c3-test

我正在使用https://github.com/peernohell/meteor-c3.js/

我从 C3 站点http://c3js.org/examples.html 中提取了两个示例，并且可以让它们在页面上显示一次，但是当我尝试在同一页面上添加第二个示例时，第一个会消失。没有控制台错误，并且 javascript 变量不同。

图表 1 html 模板：

<template name="chart_cp_overview">
    <div id="cpOverview"></div>
</template>

图 1 js 助手：

Template.chart_cp_overview.rendered = function () {
var cpOverview = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200],
            ['data2', 130, 100]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});
}

图表 2 html 模板：

<template name="chart_status">
    <div id="chart"></div>
</template>

图表 2 助手：

Template.chart_status.rendered = function() {
var chart = c3.generate({
    data: {
        columns: [
            ['Dropped', 30],
            ['On Course', 120],
            ['DNS', 20],
            ['Finished', 40]
        ],
        colors: {
            'Dropped': '#E60000',
            'On Course': '#00ACED',
            'DNS': '#DBDBDB',
            'Finished': '#00BD07'
        },
        type : 'donut',
        onclick: function (d, i) { console.log("onclick", d, i); }
        // onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        // onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    donut: {
        title: "Entrant Status",
        label: {
            format: function (value, ratio) {
                return value;
            }
        }
    }
});
};

显示代码：

    <div class="row">
        <div class="col-md-6">
            {{> chart_cp_overview}}
        </div>
        <div class="col-md-6">
            {{> chart_status}}
        </div>
    </div>

上面的代码只显示最后一个图表——chart_status。如果我删除任何一个把手引用另一个图表显示正常，或者如果我有多个把手到多个图表，则显示最后声明的任何内容。

如何在一页中显示多个图表？示例在 github 上 https://github.com/FickleLife/meteor-c3-test

【问题讨论】：

现在如何将它连接到数据库中的数据？这就是我卡住的地方。

标签： meteor

【解决方案1】：

看起来您可能打算将您在模板渲染函数中选择的两个变量名称cpOverview 和chart 绑定到具有这些 id 的 dom 元素。那样不行。

您选择的变量名称是其函数的本地变量，并且在任何情况下都不会自动附加到具有该 id 的元素，即使它们是全局的。所以 c3 将所有这些图表绑定到同一个 dom 元素（文档说默认是#chart），最后一个覆盖了之前的。

您希望将每个图表绑定到其各自的元素。你可以在你的渲染函数中使用this.firstNode（根据你设置它的方式），或者使用jquery，或者this.find("div#cpOverview")，然后使用c3 api将图表绑定到它——它看起来像{ bindto: "div#cpOverview" }可能是你想要的。

【讨论】：

而 bindto 就是答案。谢谢！