Plotly图表

Redash商业版自定义代码视图模式可以绘制plotly.js图表，使用Plotly更加倾向于制作可以交互的图像，图表的每个方面，例如颜色，网格线和图例都可以自定义配置，完全实现了图表的灵活性，可以根据自行的设置来进行图表的显示，我们还可以配合取数函数的使用来进行视图的制作，使得图标的种类更加的多种多样。

下面演示如何利用plotly.js制作动画图表 -

1.打开redash网站，新建视图

在查询中新建视图，图表类型选择自定义样式。（没有安装redash的,可以到redash中文版网站http://www.dazdata.com 试用）

// 传入参数：x, ys, element, scheme, parameter 和 Plotly。

// x：为x轴返回值数组。

// ys：为y轴返回值数组对象，如ys.field1等获取对应y轴返回值数组。

// element：为容器div对象。

// scheme：样式对象，属性style,mode,bg,back,color,titleback,titlecolor。

// parameter：为url参数对象，每个url参数名值构成。

// 调用：Plotly.plot(element, data, layout, config)。

2.复制代码

打开plotly.js网站https://plotly.com/javascript/，我们可以看到许多实例，这里选择我们需要的比如动画（animations），打开案例，将代码复制下来，粘贴到redash自定义代码中。

3.修改参数

由于vpn限制，案例中的数据无法直接调取，这里我们需要把csv文件下载下来，然后上传到其他可以被所有人访问的地址，然后替换源文件地址。

redash容器div对象是element，案例中容器名称是’myDiv’，全部替换即可。参数中，xaxis和yaxis分别指定x轴和y轴所在列属性，labels显示文本标签，hovermode是显示模式，slidersteps控制滑块组件，layout控制布局属性，data控制图表中数据，所有参数可以按照需求来调整。

调整完成后保存马上就可以生成所需的动画图表