javascript - 表示 2 个或更多 dimple.js 图表-6ren

javascript - 表示 2 个或更多 dimple.js 图表

转载作者：行者123 更新时间：2023-11-30 00:30:37

24

4

我是菜鸟，目前正在练习 dimple.js。

我面临的问题是我无法在同一页面上并排显示 2 个图表，它只显示一个图表。我该如何解决这个问题？

我用两个不同的 ID 命名了每个 div，并在脚本中考虑了这一点。

    <body>


<section>
 <div id="chartContainer1" class="container">

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer1", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 505, 305);
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>



<div id="chartContainer2" class="container">

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer2", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 505, 305);
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>


</section>

最佳答案

编辑:我清理了代码，以帮助您在以后的工作中更易于维护。

http://jsfiddle.net/gv615hcL/

--

所以问题出在变量命名上。你正在覆盖你的变量。在第二个声明中，您想要更改新酒窝 svg 的名称，例如而不是命名它:

var svg = dimple.newSvg("#chartContainer2", 590, 400);

命名:

var svg2 = dimple.newSvg("#chartContainer2", 590, 400);

此外，请确保您继续正确引用变量。

我在这里为您制作了一个快速的 JsFiddle:http://jsfiddle.net/fq4p7t2x/

关于javascript - 表示 2 个或更多 dimple.js 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29711341/

24

4

0

文章推荐： javascript - 使用 Play Framework 以 JSON 格式提交表单

文章推荐： javascript - Reflux connectFilter 仍在向所有监听组件发送更新

文章推荐： javascript - 完全迷失在 AngularJS 身份验证实现上

java - 在自动装箱中明确使用 l 表示 Long，D 表示 Double，F 表示 Float
Byte byte1=10; Short short1=20; Integer integer=30; 在上面的代码中自动装箱成功在这里查看下面的代码，我正在明确地进行 casitng，因为它默认将
java - 必须指定 L 表示 long、F、D 表示 float、double 的原因
这里有几个相关的问题。根据标题，如果我们将变量类型指定为 long 或 float、double，为什么它是一个要求？编译器不会在编译时评估变量的类型吗？ Java 将所有整型文字视为 int -
linux - Bash: '$(( ))' 表示 'expr' 和 '[ ]' 表示 'test'？
我最近一直在使用一些 bash 脚本，并且一直在浏览手册页。根据我收集到的信息，$(( )) 是否表示 expr 而 [ ] 是否表示 test？对于 $(( )): echo $(( 5 + 3
ios - UILabel 显示 1k 表示 int 值 1000 和 2k 表示 2000 等等
我有 UILabel，其中显示了 int 值，我希望如果值以千为单位，例如 1000，那么标签应该在 2000 年及以后显示 1k 和 2k。如何实现？最佳答案这个怎么样？ int myNum =
触发器的 verilog 表示
我正在自学 verilog 并尝试编写失败模型。我在指定部分遇到了以下 ck->q 延迟弧的建模，但无法理解它到底是做什么的。 (posege CK => (Q : 1'b1))=(0, 0); 谁能
文本中实体引用的 rdf 表示
考虑这样一个句子: John Smith travelled to Washington. 在美好的一天，名称标记者会将“约翰·史密斯”识别为一个人，将“华盛顿”识别为一个地方。然而，如果没有其他证据
javascript - && 表示 : AND, ||表示或
有没有办法通过某种元处理器或预处理器告诉 JavaScript 单词 AND 等于 && 而单词 OR 等于 ||和 <> 等同于 !===? 也许将 THEN 等同于 { 结束到不要! 最佳答案
c++ - 1亿节点大图的C++表示
我正在处理一个非常大的图，它有 5 亿个节点，节点的平均度为 100。所以它是一种稀疏图。我还必须存储每条边的权重。我目前正在使用两个 vector ，如下所示 // V could be 100 m
一组非重叠整数范围的 Python 表示
我想使用 Python 表示一组整数范围，其中可以动态修改该集合并测试其是否包含在内。具体来说，我想将其应用于文件中的地址范围或行号。我可以定义我关心的地址范围: 200 - 400 450 -
负整数的 Python 表示
>>> x = -4 >>> print("{} {:b}".format(x, x)) -4 -100 >>> mask = 0xFFFFFFFF >>> print("{} {:b}".forma
正则表达式表示非指定字符串开头的正则
虽然代码不多，但简单明了复制代码代码如下: preg_match('/^(?!string)/', 'aa') === true 这个用来验证一个字符串是否是非'string'开头的，
python - 表示 SQLAlchemy 中偏移日期的混合属性
我正在尝试创建一些 SQLAlchemy 模型，并且正在努力解决如何将 timedelta 正确应用于特定列的问题。 timedelta(以天为单位指定)作为整数存储在单独的表 (Shifts) 中，
http - 什么字节范围 0- 表示
“Range: bytes=0-” header 是什么意思？是整个文件吗？我尝试发回 0 个字节但没有成功，当我发送整个文件时它可以正常工作，但我在流式上下文中不止一次收到此请求，它看起来不正确。
sql - 时间序列的 SAX 表示
要创建时间序列的 SAX 表示，您首先需要计算数据的 PAA(分段聚合近似)，然后将答案映射到符号表。但是，在计算 PAA 之前，您需要对数据进行标准化。我正在对数据进行标准化，但我不知道之后如何计
rest - transient REST 表示
假设我有一个 RESTful、超文本驱动的服务来模拟冰淇淋店。为了帮助更好地管理我的商店，我希望能够显示每日报告，列出所售每种冰淇淋的数量和美元值(value)。这种报告功能似乎可以作为名为 Dai
nlp - 句子的 RDF 表示
我需要以 RDF 格式表示句子。换句话说，“约翰喜欢可乐”将自动表示为: Subject : John Predicate : Likes Object : Coke 有谁知道我应该从哪里开始？是否
d - 表示 D 中的可选值
我即将编写一个解析器，将文本文件逐行读取到不同类型的结构中，并将这些结构提供给回调(观察者或访问者 - 尚不确定)。文本文件包含 MT-940 数据 - SWIFT 银行对帐单。这些行由一个指定类
python - 表示 "doubled"枚举值的最佳方式
我主要是一名 C++ 开发人员，但我经常编写 Python 脚本。我目前正在为游戏编写骰子模拟器，但我不确定在 Python 中解决我的问题的最佳方法。一共有三种玩家技能，每个玩家一强、中一、弱一。
XOR 的数学(算术)表示
在过去的 5 个小时里，我一直在寻找答案。尽管我找到了很多答案，但它们并没有以任何方式提供帮助。我基本上要寻找的是任何 32 位无符号整数的按位异或运算符的数学、算术唯一表示。尽管这听起来很简单，
sql - 表示 DAG(有向无环图)
我需要将依赖项存储在 DAG 中。 (我们正在细粒度地规划新的学校类(class)) 我们正在使用 rails 3 注意事项宽于深很大我估计每个节点有 5-10 个链接。随着系统的增长，这将增加

首页

博学

6Ren·AI

商城

javascript - 表示 2 个或更多 dimple.js 图表