如何用plotly.js画图

@[plotly.js)

plotly.js基于d3.js是更加成熟的库，功能更加强大，但是在网上资料好像不是太多（英文官网打开要翻墙，好像也没太多人搬运）所以来总结一下。

1.首先引用plotly.js库

<head>
               <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

若想引用某一个版本的库可以

<head>
               <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
</head>

这里引用了1.2.0的库

2.现在用plotly.plot()来画一个图表

<div id="tester" style="width:600px;height:250px;"></div>

<script>
	TESTER = document.getElementById('tester');
	Plotly.plot( TESTER, [{
	x: [1, 2, 3, 4, 5],
	y: [1, 2, 4, 8, 16] }], {
	margin: { t: 0 } } );
</script>

画出来的效果
如何用plotly.js画图
先放两张来自官网的sheet

这是官方给出的模板图

从上面的图中可以看到有两个出现较多的词trace，layout
其实一个简单的chart的绘制可以表示为：

Plotly.plot(chartArea, [trace1, trace2, trace3], layout );

chartArea：图表所在的div。
[trace1, trace2, trace3]：图表中的绘制曲线的数目。
layout：用来设置图表的一些属性（图例，坐标轴，数据表现形式等等）

参考网址：https://plot.ly/javascript/

如何用plotly.js画图

相关推荐