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

这是一个工作小提琴：http://jsfiddle.net/NCW89/

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

1 个答案: