如何为 dimple.js 设置时间格式

Question

我正在尝试根据示例代码使用 dimple.js 绘制多线图。我已将我的 JSON 展平成一个数组，我以为我理解了代码，但我没有得到任何结果。

我正在引用这两个库（使用 cloudflare dimple，因为我的系统不允许不安全的 link）：

<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 条完全独立的水平线，一条用于 'ALL the things'，另一条用于 'More'。

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();

Firefox 给我一个

TypeError: a.time is undefined

Chrome 说：

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

这就是为什么我认为这可能是格式问题。我尝试了各种时间格式但没有成功。我也尝试过几种不同类型的斧头，但它们都是在黑暗中拍摄的。我搜索了又搜索，但要么没有太多相关信息，要么我问错了问题。我会很感激一些建议。

Answer 1

这就是您的数据对象的样子。
所以..日期格式如下：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}
  ];

Answer 2

对 d3v4 使用 Dimple.js 版本 2.3.0。此外，y 轴应使用 addMeasureAxis：

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

以及 x 轴的适当刻度格式：

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>

如何为 dimple.js 设置时间格式

how to format time for dimple.js

javascript

json

d3.js

dimple.js