javascript - dimple.js 中的多个系列，用户为 y1 和 y2 轴选择数据

Question

我正在尝试创建一个图表，其中 x 轴显示日期，y1 和 y2 轴显示用户在复选框表单中选择的测量值。

我正在使用 ClojureScript 编程，但我会尝试将下面的代码翻译成 JavaScript。

我的数据是这样的:

(def mock-data {"01"
                [{"device_id" "01" "device_name" "External temperature" "month" "01/01/2011" "reading" 0.8}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/02/2011" "reading" 0.9}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/03/2011" "reading" 0.8}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/04/2011" "reading" 0.75}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/05/2011" "reading" 0.65}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/06/2011" "reading" 0.50}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/07/2011" "reading" 0.55}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/08/2011" "reading" 0.6}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/09/2011" "reading" 0.66}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/10/2011" "reading" 0.68}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/11/2011" "reading" 0.71}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/12/2011" "reading" 0.9}]
                "02"
                [{"device_id" "02" "device_name" "External humidity" "month" "01/01/2011" "reading" 6}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/02/2011" "reading" 10}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/03/2011" "reading" 12}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/04/2011" "reading" 15}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/05/2011" "reading" 18}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/06/2011" "reading" 20}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/07/2011" "reading" 25}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/08/2011" "reading" 31}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/09/2011" "reading" 20}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/10/2011" "reading" 17}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/11/2011" "reading" 12}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/12/2011" "reading" 9}]})

我有一个包含两列的表单。左列允许选择要显示在 y1 轴上的设备，右列显示在 y2 轴上。两列都包含完全相同的设备列表。一旦在左轴上选择了一个设备，就不能在右轴上再次选择它。出于测试目的，只有两个设备。

数据的过滤是由 ClojureScript 完成的，而不是 dimple。

var svg = dimple.newSvg("#chart", 500,500);
var measurements = fetchData(); // Filters data by devices selected on the form
var chart = new dimple.chart(svg, measurements);
var x = chart.addCategoryAxis("x","month");
var y1 = chart.addMeasureAxis("y", "reading");
var y2 =chart.addMeasureAxis("y", "reading");
chart.setBounds(60,30,350,350);
chart.addSeries("device_id", dimple.plot.line, [x, y1]));
chart.addSeries("device_id", dimple.plot.line, [x, y2]));
chart.addLegend(60, 10, 300, 20, "right");
chart.draw();

当用户在左轴上选择设备 01 和 02 时，两条线都会正确绘制。当他们只选择左轴上的一个设备时，它也可以正常工作。但是当他们在右轴上选择任何东西而在左轴上什么都没有时，就不会绘制任何东西。当左侧选择设备 01，右侧选择 02 时，只有左轴有一条线。

我想在 dimple.js 中实现什么？任何帮助将不胜感激。

Answer 1

好的，您现在可以使用 dimple v1.1.4 执行此操作。

在最新版本中，您可以根据需要将数据分配给系列而不是图表。因此，您将数据集过滤成 2 个部分，并为每个系列分配一个。

这是在不同轴上使用 2 个数据集的示例。希望它能让你实现你想要的:

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();

这是一个工作 fiddle :http://jsfiddle.net/NCW89/