javascript - 在同一个 html 页面上显示多个人力车图

Question

我目前有几个动态生成的基于 JS 的人力车图，类似于 http://code.shutterstock.com/rickshaw/examples/extensions.html

我对 JS、html 等有点陌生。如何在同一个 html 页面上显示多个人力车图？

注意:我并不是要在同一张图表上显示多个趋势。

Answer 1

假设您有以下图表:

var graph = new Rickshaw.Graph({
    series: [ { data: [ { x: 0, y: 2 }, { x: 1, y: 4 } ...
    renderer: 'area',
    element: document.querySelector('#graph')
});

graph.render();

您刚刚所做的是创建一个名为 graph 的全局变量，它是 Rickshaw 类*的一个实例，它将内容呈现给 id 为图(即:

)。

要渲染另一个图，创建一个新实例:

var graph2 = new Rickshaw.Graph({
    series: [ { data: [ { x: 0, y: 5 }, { x: 1, y: 9 } ...
    renderer: 'area',
    element: document.querySelector('#graph2')
});

graph2.render();

...并将其绑定(bind)到一个新元素:

<div id="graph2">

*虽然 Javascript 有原型(prototype)而不是类，但有时当您使用 new 关键字调用函数时，用经典术语来思考函数会很有帮助。