带y轴时间的图表

Question

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

我唯一能找到这样的作品的是googles时间表图表：https://developers.google.com/chart/interactive/docs/gallery/timeline。问题是，它们不允许离线使用，这是我必须拥有的。有没有人见过任何适用于此的东西？我一直在使用amCharts，但它们只允许在类别（x）轴上使用parseDates。

Answer 1

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

使用正常的多系列条形图实现重叠条形图，其中bars-overlap在绘图对象内设置为100％，其中一个系列bar-width设置为80％（或任何百分比）你想用）。查看包含的代码和图表代码段。

至于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
}