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控制图表中数据,所有参数可以按照需求来调整。

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

匹配结果 ""

    没有匹配结果 ""