以时间为 y 轴的图表

Question

我需要一个在 y 轴上使用时间的 ionic 应用程序的图表，如下所示：

我唯一能找到像这样工作的是谷歌时间线图：https://developers.google.com/chart/interactive/docs/gallery/timeline。问题是，它们不允许离线使用，这是我必须具备的。有没有人看到任何可以解决这个问题的方法？我一直在使用 amCharts，但它们只允许在 category(x) 轴上使用 parseDates。

Answer 1

您可能会对 ZingChart 感兴趣。顶部的 y 轴就像创建 scale-y-2 对象一样简单（您可以将原始的 scale-y 轴设置为 visible: 0）。

重叠条是通过普通的多系列条形图实现的使用）。查看包含的 sn-p 代码和图表。

至于将时间用于 y 轴值，库提供了 transform 对象，该对象将 transform Unix timestamps into various date/time formats。您可以在文档中read more about it。

我是 ZingChart 团队的一员，所以如果您对实施有任何疑问，请联系我们！

var myChart = {
    "type":"hbar",
	"plotarea":{

	},
    "scale-y-2":{
        "values":["3pm","4pm","5pm","6pm","7pm"]
    },
    "scale-y":{
        "visible":false
    },
	"plot":{
        "bars-overlap":"100%"
	},
	"series":[
		{
			 "values":[20,5,3,4]
		},
        {
            "values":[18,8,4,5],
            "bar-width":"80%"
        }
	]
};

zingchart.render({
  data: myChart,
  id: "myChart",
  width: "100%"
 
});

#myChart {
  width: 100%;  
}

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

Answer 2

看看HighCharts

它们非常可定制，可以离线工作。

编辑

JSFiddle

chart: {
    type: 'bar'
},
yAxis: {
    type: 'datetime',
    opposite: true
}