dimple.js의 시간 형식을 지정하는 방법

Question

샘플 코드를 기반으로 dimple.js 인 다중 선 그래프를 시도하고 있습니다. 배열로 JSON을 평평하게하고 코드를 이해할 수 있다고 생각했지만 어디에도 없습니다. (내 시스템이 안전하지 않은 링크를 허용하지 않습니다 때문에 cloudflare 딤플 사용)

나는이 두 라이브러리를 참조하고있다 : 난 그렇게 (아래)처럼 내 데이터를 포맷 한

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.1.6/dimple.latest.min.js"></script> 

. 이 데이터는 2 개의 완전히 다른 수평선을 제공해야합니다. 하나는 '모든 것'에 대한 것이고 다른 하나는 '기타'에 대한 것입니다.

coordinates = [{"title":"ALL the things","date":"2017-11-14T00:00:00.000Z","hours":0.5}, 
       {"title":"ALL the things","date":"2017-11-20T00:00:00.000Z","hours":0.5}, 
       {"title":"More","date":"2017-11-27T00:00:00.000Z","hours":0.91}, 
       {"title":"More","date":"2017-12-04T00:00:00.000Z","hours":0.91}, 
       {"title":"More","date":"2017-12-11T00:00:00.000Z","hours":0.91}, 
       {"title":"More","date":"2017-12-18T00:00:00.000Z","hours":0.91}, 
       {"title":"More","date":"2017-12-25T00:00:00.000Z","hours":0.91}]; 

여기에 딤플 코드가 있습니다. 너무 간단한 것하지만 난 분명히 뭔가 누락 :

var svg = dimple.newSvg("#graph", 590, 400); 
var myChart = new dimple.chart(svg, coordinates); 
myChart.setBounds(60, 30, 505, 305); 
var x = myChart.addTimeAxis("x", "date"); 
x.addOrderRule("date"); 
var y = myChart.addTimeAxis("y", "hours"); 
var s = myChart.addSeries("title", dimple.plot.line); 
s.interpolation = "cardinal"; 
myChart.draw(); 

파이어 폭스가

TypeError: a.time is undefined

크롬 말한다 나에게 제공을 : 나는 그것이 형식의 문제가 될 것 같아 왜

Uncaught TypeError: Cannot read property 'scale' of undefined.

. 나는 성공하지 못한 다양한 시간 형식을 시도했다. 나는 또한 몇 가지 다른 유형의 축을 시도했지만 어둠 속에서 촬영을했습니다. 나는 수색하고 찾았으나 이것에 대한 정보가별로 없거나 잘못된 질문을하고있다. 나는 약간 제안을 평가할 것입니다.

Answer 1

사용 Dimple.js 버전 2.3.0. x 축에 대한 포맷하기

var y = myChart.addMeasureAxis("y", "hours"); 

그리고 적절한 틱 : 또한, Y 축에 대한 addMeasureAxis를 사용해야합니다

var x = myChart.addTimeAxis("x", "date"); 
x.tickFormat = "%Y-%m-%d" 
x.addOrderRule("date"); 

봐 아래 예 작업에 :

var coordinates = [{ 
 
    "title": "ALL the things", 
 
    "date": "2017-11-14T00:00:00.000Z", 
 
    "hours": 0.5 
 
}, { 
 
    "title": "ALL the things", 
 
    "date": "2017-11-20T00:00:00.000Z", 
 
    "hours": 0.5 
 
}, { 
 
    "title": "More", 
 
    "date": "2017-11-27T00:00:00.000Z", 
 
    "hours": 0.91 
 
}, { 
 
    "title": "More", 
 
    "date": "2017-12-04T00:00:00.000Z", 
 
    "hours": 0.91 
 
}, { 
 
    "title": "More", 
 
    "date": "2017-12-11T00:00:00.000Z", 
 
    "hours": 0.91 
 
}, { 
 
    "title": "More", 
 
    "date": "2017-12-18T00:00:00.000Z", 
 
    "hours": 0.91 
 
}, { 
 
    "title": "More", 
 
    "date": "2017-12-25T00:00:00.000Z", 
 
    "hours": 0.91 
 
}]; 
 

 
var svg = dimple.newSvg("#graph", 590, 400); 
 
var myChart = new dimple.chart(svg, coordinates); 
 

 
myChart.setBounds(60, 30, 505, 305); 
 

 
var x = myChart.addTimeAxis("x", "date"); 
 
x.tickFormat = "%Y-%m-%d"; 
 
x.addOrderRule("date"); 
 

 
var y = myChart.addMeasureAxis("y", "hours"); 
 
var s = myChart.addSeries("title", dimple.plot.line); 
 
s.interpolation = "cardinal"; 
 

 
myChart.draw();

<div id="graph"></div> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

Answer 2

데이터 개체의 모습입니다. 이 같은
그래서 .. 날짜 포맷 : d3v4에 대한 DD/MM은/YYYY

coordinates = [{"title":"ALL the things","date":"14/11/2017","hours":0.5}]; 

var data = [ 
     {"Date": "22/7/2014", "etc" : 0}, 
     {"Date": "15/11/2014", "etc" : 1000}, 
     {"Date": "5/01/2015", "etc" : 2000} 
    ];