2014-11-13 3 views
1

d3 js 및 dimpel js와 함께 작업하고 있습니다. 선 차트 코드가 있습니다. 위의 차트에서 점의 색상을 변경하려면 여기에서 잘못된 점을 변경하지 마십시오. ! 어떤 도움이 감사
HTML 것 :차트의 색상을 변경 d3

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
<div id="chartContainer"></div> 
</body> 
<script src="js/d3.js" charset="utf-8"></script> 
<script src="js/dimple.js"></script> 
<script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 600, 400), 
      data = [ 
       { "Value" : 100000, "Year" : 2009 }, 
       { "Value" : 110000, "Year" : 2010 }, 
       { "Value" : 100, "Year" : 2011 }, 
       { "Value" : 140000, "Year" : 2012 }, 
       { "Value" : 120000, "Year" : 2013 }, 
       { "Value" : 140000, "Year" : 2014 } 
      ]; 

    var chart = new dimple.chart(svg, data); 
    var x = chart.addCategoryAxis("x", "Year"); 
    x.addOrderRule("Year"); 
    var y = chart.addCategoryAxis("y", "Value"); 
    //this line have dosen't work!!!! 
    chart.addColorAxis("Value", ["green", "yellow", "red"]); 
    var lines = chart.addSeries(null, dimple.plot.line); 
    lines.lineWeight = 5; 
    lines.lineMarkers = true; 
    chart.draw(); 
</script> 
</html> 

답변

1

당신이 겪고있는 문제는 당신이 대신 measureAxiscategoryAxis으로 y 축을 추가하는 사실에서 유래한다. 당신이 measureAxisy를 변경하는 경우, 다음 코드는 완벽하게 작동합니다 :

var y = chart.addMeasureAxis("y", "Value"); 

여기 결과의 스크린 샷입니다 :

enter image description here

+0

아 - 당신은 그냥 날 이길! 어쨌든, 여기에 같은 해결책을 가진 jsfiddle가 있습니다 : http://jsfiddle.net/henbox/L0xjjcnn/2/ –

+0

@HenryS : 아아, 건배! – mdml

+0

@mdml 귀하의 답변을 주셔서 감사합니다 네, 어리석은 질문에 대한 미안 해요. 나는 보조개 js 및 d3 js –

관련 문제