2014-09-06 2 views
-1

다음 코드는 범례뿐만 아니라 차트에 두 개의 시리즈를 렌더링합니다. 내가 뭘하고 싶은 건 각각의 범례 항목을 클릭하면, 나는 관련 시리즈 라인을 숨기기/숨기기를 원할 때입니다. 어떻게해야할지 모르겠습니다. 나는이 샘플을 보았다 : http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends. 하지만이 예제는 하나의 시리즈를 사용하기 때문에 여기서는 적용되지 않는다고 생각합니다. 여기서 두 개의 별개의 줄을 그려야합니다.dimple.js/d3.js : 시리즈 전환 방법

누구든지 내가 어떻게 풀 수 있는지 알고 있니? 어떤 범례 항목을 클릭했는지에 따라 계열 선을 검색 할 수 있습니까?

<div id="chart1"> 
    <script> 
     var svg1 = dimple.newSvg("#chart1", 600, 500); 
     var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}], 
        [{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]] 

     var chart1 = new dimple.chart(svg1); 
     chart1.setBounds(70, 30, 400, 300) 
     var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y"); 
     xAxis.title="Date" 
     var yAxis = chart1.addMeasureAxis("y", "y"); 
     yAxis.title = "Price" 

     s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]); 
     s1.data = data1[0] 
     s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]); 
     s2.data = data1[1] 
     myLegend1 = chart1.addLegend(510, 100,60, 200, "Right"); 
     chart1.draw(); 
    </script> 
</div> 

답변

1

필터링에 대해 걱정할 필요가 없기 때문에 실제로는 예제의 경우보다 약간 간단합니다. 대신 당신은 단지 사전을 작성하고 관련 데이터 세트 그런 식으로 찾을 수 있습니다 완벽한

var svg1 = dimple.newSvg("#chart1", 600, 500); 
    var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}], 
       [{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]] 

    var chart1 = new dimple.chart(svg1); 
    chart1.setBounds(70, 30, 400, 300) 
    var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y"); 
    xAxis.title="Date" 
    var yAxis = chart1.addMeasureAxis("y", "y"); 
    yAxis.title = "Price" 
    var seriesDict = {}; 

    s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]); 
    s1.data = data1[0] 
    seriesDict["Series1"] = { data: data1[0], series: s1, visible: true }; 

    s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]); 
    s2.data = data1[1] 
    seriesDict["Series2"] = { data: data1[1], series: s2, visible: true }; 

    myLegend1 = chart1.addLegend(510, 100,60, 200, "Right"); 

    chart1.draw(); 

    chart1.legends = []; 

    myLegend1.shapes.selectAll("rect") 
     // Add a click event to each rectangle 
     .on("click", function (e) { 
     var meta = seriesDict[e.aggField[0]]; 
     if (seriesDict[e.aggField[0]].visible) { 
      meta.series.data = []; 
      d3.select(this).style("opacity", 0.2); 
      seriesDict[e.aggField[0]].visible = false; 
     } else { 
      meta.series.data = meta.data;   
      d3.select(this).style("opacity", 1);  
      seriesDict[e.aggField[0]].visible = true; 
     } 
     chart1.draw(1000); 
    }); 

http://jsbin.com/zadic/2/edit?js,output

+0

을! 고맙습니다! – mike01010

+0

hmmm .. '실제'데이터로이 작업을 수행하려고 할 때 계열 선이 토글되지 않도록 예외가 발생합니다. [코드] Uncaught TypeError : 정의되지 않은 dimple.v2.1.0의 'hasOwnProperty'속성을 읽을 수 없습니다. .min.js : 2 (익명 함수) dimple.v2.1.0.min.js : 2b._getOrderedList dimple.v2.1.0.min.js : 2b._getSeriesOrder dimple.v2.1.0.min.js : 2b.plot. line.draw dimple.v2.1.0.min.js : 2 (익명 함수) dimple.v2.1.0.min.js : 1draw dimple.v2.1.0.min.js : 1 (익명 함수) 100 : 114 (익명 함수) [/ code] – mike01010

+1

문제가 http://dimplejs.org/dist/dimple.v2.1.0.min.js에있는 것 같습니다. 대신 참조 : http://dimplejs.org/dist/dimple.v2.0.0.min.js, 잘 작동합니다. – mike01010