0
동적으로 피드 (데이터) 직선을 작성하려고합니다. 차트. 내가 여기 graphael.
동적 데이터가있는 직선 차트
를 사용하여 프로토 타입을 구축하는 것은 내 코드입니다 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Charts</title>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.line.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.onload = function() {
var r = Raphael("holder");
var yAxisTags = ["A","B","C","D"];
var xData = [
[2000,2015],//hack line, transparent; used to specify the range of the axis
[2008,2014],[2004,2005],[2009,2010],[2000,2007],[2000,2014],[2010,2012]
];
var yData = [
[1, 1],//y coordinates of hack line
[0, 0],[1, 1],[1, 1],[2, 2],[3, 3],[0,0],
[0, 0]//hack line, transparent.Used to be able to draw straight lines
];
var colors = [
'transparent',//line 1
'red','green','green','purple','turquoise','black',
'transparent'];//'transparent' IS A MUST, a hack to make it have a straight line
var options = {
nostroke: false,
gutter: 90,
axis: "0 0 1 1",
symbol: "circle",
axisxstep:10,
axisystep:3,
colors: colors
};
var lines = r.linechart(100, 10, 700, 300,xData,yData,options);
// AXIS (x and y) have values but do not drawn the lines
lines.axis[0].attr([{stroke: false}]);
lines.axis[1].attr([{stroke: false}]);
// Thickness of symbols (ie dots)
lines.symbols.attr({ r: 4 });
// Animate dots on first load
lines.animate({"stroke-width": 1}, 1000);//ALL lines,1000 is animation time
// Set text for Y axis coordinates (instead of numbers)
$.each(lines.axis[1].text.items, function(index, label) {
this.attr("text", yAxisTags[index]);
});
};
</script>
</head>
<body>
<div id="holder" style="width:50%"></div>
</body>
</html>
그리고 여기이 같은 모습입니다 : (그래서 기본적으로 
내가 관련 시간을 원하는 점으로 2 년 점프)레이블이있는 Y 축의 레이블, 즉 ma de 직선 그리기 및 동적 데이터가 공급되는. 현재 코드는 내가 데이터를 수정하기 시작하면이 특정 구성은하지만 , 디스플레이가 더 이상 정확하지 작동 :
- x 축 (시간 축) 버그 점프하지 않는 시간을 가져옵니다 + 이년
- 이년 (2 X 좌표) 사이에 큰 차이가있는 경우는, 라인이
- 이 axisxstep 및 axisxstep을 수정해야하는 점으로 그려지는 (어떻게 논리를 이해하지 못하는 이 작품 뒤에는 정직해야한다.)
- 등
는 기술이 있나요/동적 데이터 내 원하는 라인 차트 개념 작업이 graphael를 사용하기 위해 주위를 해킹? 또는이 라이브러리에서 실행 가능하지 않습니까? 사람들을위한
d3.js는 다른 특정 답장이 없다면 확실히 볼만한 가치가 있습니다. – Ian
@Ian 감사 팁 맨! – shadesco