带有自定义日期凹窝.js的数据

Data with custom date dimple.js

本文关键字:js 数据 自定义 日期      更新时间:2023-09-26

目前我有这个:

<div id="chartContainer">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
    <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    var data = [
        {'Date': '01-03-2013', 'Views': '13'},
        {'Date': '05-03-2013', 'Views': '123'},
        {'Date': '09-03-2013', 'Views': '234'},
        {'Date': '13-03-2013', 'Views': '95'},
    ];
    /*
    var data = [
        {'Date': '01-03-2013 - 02-03-2013', 'Views': '13'},
        {'Date': '05-03-2013 - 06-03-2013', 'Views': '123'},
        {'Date': '09-03-2013 - 10-03-2013', 'Views': '234'},
        {'Date': '13-03-2013 - 14-03-2013', 'Views': '95'},
    ]; */
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(70, 30, 490, 310)
    var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y", "%d-%m");
    x.showGridlines = true;
    x.addOrderRule("Date");
    var y = myChart.addMeasureAxis("y", "Views");
    y.tickFormat = "d";
    var s = myChart.addSeries(null, dimple.plot.line);
    s.lineWeight = 4;
    s.lineMarkers = true;
    myChart.draw();
    </script>
</div>

演示:jsfiddle

我应该怎么做才能让deeple.js/d3.js正确处理带有范围日期的注释数据?

这不是一个具体的酒窝问题,酒窝只是使用d3时间格式,而d3时间又是python格式。我不知道如何填充未知字符。一种方法是事先用一些简单的JS来修剪字符串。如果你需要保持数据的原样,你可以通过将第二个日期分配给毫秒来作弊:

"%d-%m-%Y-%L-%L-%L%L"

这基本上会给每个日期增加13毫秒,这在显示中是无关紧要的,但不是一个真正好的解决方案。