사용자가 y1 및 y2 축의 데이터를 선택하는 중 dimple.js의 여러 계열

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로 수행됩니다.

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/