NVD3 - 如何创建简单的时间线图表

时间:2014-08-01 15:45:54

标签: javascript d3.js nvd3.js

我有兴趣创建一个简单的时间线图表,其中事件显示在X轴上,日期显示在Y轴上。我在下面提供了一个示例代码,其中可以使用多条形图来完成,但我希望将事件表示为点而不是条形。我还不清楚如何正确格式化返回的日期。请提前了解并感谢您的帮助和澄清

http://jsfiddle.net/acreton/4ALS7/

<div id="chart">
    <svg style="height:250px;"></svg>
</div>

var data = [
    {
        'key': 'Timeline',
        'values': [
            ['Event 1', 1136005200000],
            ['Event 2', 1201755600000],
            ['Event 3', 1225425600000],
            ['Event 4', 1288497600000],
            ['Event 5', 1293771600000],
            ['Event 6', 1322629200000]
        ]
    }
    ]

    var chart = nv.models.multiBarHorizontalChart()
        .margin({ top: 30, right: 10, bottom: 30, left: 90 })
        .x(function (d) { return d[0]; })
        .y(function (d) { return d[1]; })
    ;

    console.log(chart.width());

    chart.xAxis.axisLabel('')
        .tickFormat(function (x) { return x.toString(); });

    chart.yAxis.axisLabel('')
        .tickFormat(function (y) { return d3.time.format('%y')(new Date(y)); });

    d3.select('#chart svg')
        .datum(data)
      .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

0 个答案:

没有答案