Question

我正在尝试创建一个包含两个轴和两个数据系列的简单图表。

当我定义气泡序列时 - 所有都按预期工作，但是当两个系列都定义为直线时，从数据点到y轴的虚线会混淆

令人惊讶的是，我似乎无法找到任何显示2 * y轴和2 *线系列的例子。

我的x轴是基于时间的，但我可以使用之前的JSfiddle答案（jsfiddle.net/NCW89 /）说明问题：

var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null;

chart = new dimple.chart(svg);
x = chart.addCategoryAxis("x", "Fruit");
y1 = chart.addMeasureAxis("y", "Value");
y2 = chart.addMeasureAxis("y", "Value");
s1 = chart.addSeries("Year", dimple.plot.bubble, [x, y1]);
s1.data = [
       { "Value" : 100000, "Fruit" : "Grapefruit", "Year" : 2012 },
       { "Value" : 400000, "Fruit" : "Apple", "Year" : 2012 },
       { "Value" : 120000, "Fruit" : "Banana", "Year" : 2012 }
    ];
s2 = chart.addSeries("Year", dimple.plot.bubble, [x, y2]);
s2.data = [
       { "Value" : 110000, "Fruit" : "Grapefruit", "Year" : 2013 },
       { "Value" : 300000, "Fruit" : "Apple", "Year" : 2013 },
       { "Value" : 140000, "Fruit" : "Banana", "Year" : 2013 }
   ];
chart.draw();

从dimple.plot.bubble更改系列 - ＆gt; dimple.plot.line将演示行为。

似乎有这样一个常见的功能，我不禁感到我错过了一些明显的东西。

由于

Answer 1

我担心你没有遗漏任何东西，这是最新版本中引入的错误。我将在下一周或两周内发布1.2版。不幸的是，破坏版本也增加了设置系列特定数据的能力。如果您想在此期间解决问题，则需要返回1.1.3版并以旧式方式设置数据：

var svg = dimple.newSvg("#chartContainer", 600, 400),
    chart = null,
    s1 = null,
    s2 = null,
    x = null,
    y1 = null,
    y2 = null,
    data = [
        { "Fruit" : "Grapefruit", "Value 1" : 100000, "Year 1" : 2012, "Value 2" : 110000, "Year 2" : 2013 },
        { "Fruit" : "Apple", "Value 1" : 400000, "Year 1" : 2012, "Value 2" : 300000, "Year 2" : 2013 },
        { "Fruit" : "Banana", "Value 1" : 120000, "Year 1" : 2012, "Value 2" : 140000, "Year 2" : 2013 }
];

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", "Fruit");
y1 = chart.addMeasureAxis("y", "Value 1");
y2 = chart.addMeasureAxis("y", "Value 2");
s1 = chart.addSeries("Year 1", dimple.plot.line, [x, y1]);
s2 = chart.addSeries("Year 2", dimple.plot.line, [x, y2]);
chart.draw();

http://jsfiddle.net/NVV9r/1/

dimple.js多系列线图表

1 个答案:

dimple.js多系列**线**图表

1 个答案:

dimple.js多系列线图表