Question

我正在寻找支持类似股票功能的前端图表库（即Javascript中的东西）。然而，我的x轴不是时间，而是递增的整数 - 这使我停止使用大多数股票图表库。

我使用AmChart做我需要的事情： https://www.moneypot.com/user/whitetuxpeng

但是由于数据量的原因，我被迫使用分页。我更喜欢的是使用一个首先允许我显示数据采样的库，当你放大到足以使各个数据点可用时。

谢谢！

Answer 1

您可以使用D3尝试其他库或构建自己的功能。 ZingChart是一个JavaScript图表库，应该满足您的所有要求。首先，关于您的x轴问题，ZingChart能够以多种不同的方式配置x轴。我包含了demo that shows setting up the x-axis的代码段，其中包含最小值和步长值。

＆＃13;

       var myChart =        {
        "type":"line",
        "scaleX":{
            "min-value":16951,
            "step":4,
            "max-labels":9
        },
        "series":[
            {
                "values":[69,68,54,48,70,74,98,70,69,68,54,69,68,54,48,70,74,98,70,72,68,49,69,48,70,74,98,70,72,68,49,69,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69],
                "text":"Apple"
            }
        ]
    };

			
		zingchart.render({
				id: "steps",
				output: "svg",
				width: 600,
				height: 400,
				data: myChart
				
			});

＆＃13;

<html>
	<head>
		<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js""></script>
	    
		<meta charset="utf-8">
		<title>Steps</title>
	</head>
	  <body>
	       <div id="steps"></div>

	</body>	
</html>

＆＃13;

关于数据大小和分页的问题，ZingChart也提供了各种方法来处理这个问题。 ZingChart可以渲染客户端图表，最多可达500k点，而无需采样数据集。您可以在http://www.zingchart.com#speedtest

尝试速度测试

如果您的数据集较大或您更喜欢对数据进行采样，ZingChart有几个选项：

面向图表表现的抽样
智能采样会防止在采样中删除外围数据点。
API，可以显示缩放交互的精确数据（如果您决定对您的数据进行抽样）。

Sampling demo

我是ZingChart团队的成员，如果您对此处的内容有任何疑问，请随时与我们联系。

Answer 2

适用于此类图表的两个库包括NVD3和chartsjs。

ChartsJS是两个人更容易理解和使用html5画布，它具有良好的性能，并允许客户端将图表轻松保存为图像。

NVD3是D3的可重用图表集合，因此支持浏览器中的任何svg。

由于您的缩放要求，我通常会推荐使用NVD3（或D3本身）。

如果这些库都不符合您的喜好he is another post列出了几个javascript图表库。

Answer 3

您可以尝试Highcharts或Google Charts。您也可以使用D3：）

自行完成

股票类数据的前端图表库

3 个答案: