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

编辑：克隆此存储库的非工作复制。 https://github.com/FickleLife/meteor-c3-test 基于D3的Meteor C3图表 - 多个图表？

我使用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

来源

2014-10-19 user1048175

现在你将如何连接到数据从数据库？那就是我坚持的地方。 – radtek 2014-10-21 02:50:05

看起来你可能想要在你的模板渲染函数cpOverview和chart中选择的两个变量名用这些ID绑定到dom元素。它不会那样工作。

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

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

来源

2014-10-19 16:50:26

和bindto是答案。谢谢！ – user1048175 2014-10-20 11:18:24

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

回答

相关问题