Javascript 如何设置dimple.js的时间格式

我正在尝试一个基于示例代码的带有

dimple.js

的多线图。我已经将JSON扁平化为一个数组，我认为我理解了代码，但我没有取得任何进展

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

这是酒窝代码。这看起来很简单，但我显然遗漏了一些东西：

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给了我一个

类型错误：a.时间未定义

Chrome说：

未捕获的TypeError:无法读取未定义的属性“scale”

---

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

这就是数据对象的外观。
所以日期的格式如下：DD/MM/YYYY

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

---

这就是数据对象的外观。
所以日期的格式如下：DD/MM/YYYY

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

---

对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坐标=[{
“头衔”：“所有的东西”，
“日期”：“2017-11-14T00:00:00.000Z”，
“小时数”：0.5
}, {
“头衔”：“所有的东西”，
“日期”：“2017-11-20T00:00:00.000Z”，
“小时数”：0.5
}, {
“标题”：“更多”，
“日期”：“2017-11-27T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-04T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-11T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-18T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-25T00:00:00.000Z”，
“小时数”：0.91
}];
var svg=dimple.newSvg（“曲线图”，590400）；
var myChart=new dimple.chart（svg，坐标）；
我的图表.挫折（60,30,505,305）；
var x=myChart.addTimeAxis（“x”，“日期”）；
x、 tickFormat=“%Y-%m-%d”；
x、 addOrderRule（“日期”）；
var y=myChart.addMeasureAxis（“y”，“小时”）；
var s=myChart.addSeries（“标题”，酒窝，绘图，线条）；
s、 插值=“基数”；
myChart.draw（）
对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坐标=[{
“头衔”：“所有的东西”，
“日期”：“2017-11-14T00:00:00.000Z”，
“小时数”：0.5
}, {
“头衔”：“所有的东西”，
“日期”：“2017-11-20T00:00:00.000Z”，
“小时数”：0.5
}, {
“标题”：“更多”，
“日期”：“2017-11-27T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-04T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-11T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-18T00:00:00.000Z”，
“小时数”：0.91
}, {
“标题”：“更多”，
“日期”：“2017-12-25T00:00:00.000Z”，
“小时数”：0.91
}];
var svg=dimple.newSvg（“曲线图”，590400）；
var myChart=new dimple.chart（svg，坐标）；
我的图表.挫折（60,30,505,305）；
var x=myChart.addTimeAxis（“x”，“日期”）；
x、 tickFormat=“%Y-%m-%d”；
x、 addOrderRule（“日期”）；
var y=myChart.addMeasureAxis（“y”，“小时”）；
var s=myChart.addSeries（“标题”，酒窝，绘图，线条）；
s、 插值=“基数”；
myChart.draw（）

当我想制作堆叠图时，这非常方便-addTimeAxis与完整日期存在一些堆叠重叠问题。所以我切换到addCategoryAxis并按照你的建议重新安排了我的日期。我唯一的问题是addOrderRule（“date”）是以字母数字顺序排列日期（12出现在2之前），因此我必须使用2位格式来组织我的月份和日期，然后一切正常。当我想做堆叠图时，这非常方便-addTimeAxis与完整日期存在一些堆叠重叠问题。所以我切换到addCategoryAxis并按照你的建议重新安排了我的日期。我唯一的问题是addOrderRule（“日期”）是以字母数字顺序排列日期（12出现在2之前），因此我必须使用2位数格式组织月份和日期，然后一切都正常。