Question

我有一个日期数据系列，数据点之间的时间间隔不均匀。我希望系列中的每个数据点都有一个标签。任何想法如何实现它？

小提琴链接是here

Answer 1

只是为了宣传我对答案的评论，完成任务的一种方法是使用d3 axis来更严格地控制轴。我更新了John的jsfiddle here来演示我们如何做到这一点。完整的独立代码位于this gist下方。

  <div id="volumeReport">

  <script>
    var svg = dimple.newSvg("#volumeReport", 590, 500);
    var data = [
    {"Date": "22/7/2014", "Volume" : 0},
    {"Date": "15/11/2014", "Volume" : 1000},
    {"Date": "5/01/2015", "Volume" : 2000},
    {"Date": "5/2/2015", "Volume" : 3000},
    {"Date": "31/3/2015", "Volume" : 4000}
    ];
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y %H:%M:%S:%L", "%d-%m-%Y");
    x.addOrderRule("Date");
    x.timeField = "Date";
    x.dateParseFormat = "%d/%m/%Y";
    myChart.addMeasureAxis("y", "Volume");
    var s = myChart.addSeries(null, dimple.plot.area);
    s.interpolation = "step";
    s.lineWeight = 1;
    s.lineMarkers = true;
    myChart.draw();

    myChart.axes[0].shapes.call(
      d3.svg.axis()
        .orient("bottom")
        .scale(myChart.axes[0]._scale)
        .tickValues(data.map(function(d,i){
            return d3.time.format("%d/%m/%Y").parse(d.Date)
          })
        )
        .tickFormat(d3.time.format("%d-%m-%Y"))
    )
  </script>

</html>

Answer 2

类别轴将沿轴均匀分隔日期：

myChart.addCategoryAxis("Date");

看起来你也试图使用需要2.1版凹坑的步长区域图。我已经更新了小提琴中的版本：

http://jsfiddle.net/tf3Sk/1/

dimple.js：不等时间段和缺少标签

2 个答案: