Question

我正在尝试基于示例代码的dimple.js多线图。我把我的JSON变成了数组，我认为我理解了代码，但我没有到达任何地方。

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

<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个完全独立的水平线，一个用于＆＃39;所有的东西＆＃39;而另一个用于“更多”＃。

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未定义

Chrome说：

未捕获的TypeError：无法读取属性＆＃39; scale＆＃39;未定义的。

这就是为什么我认为这可能是格式化问题。我尝试了各种时间格式但没有成功。我也尝试了几种不同类型的轴，但它们是在黑暗中拍摄的。我搜索过并搜索过，但要么就是这里没有多少，或者我提出了错误的问题。我很欣赏一些建议。

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。此外，您应该使用addMeasureAxis作为y轴：

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的时间

2 个答案: