我有兴趣创建一个简单的时间线图表,其中事件显示在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);