开发者模式-PlotlyJS

Plotly.js是最好的图表库，Redash中文商业版的自定义图表模式支持Plotly.js全部的代码模式，具有很大的灵活性，可以实现 Plotly的全部图表和功能。

用户自定义代码是标准的Plotly.js函数方式，Plotly.js示例代码：

var data = [
    {
        domain: { x: [0, 1], y: [0, 1] },
        value: 270,
        title: { text: "时速" },
        type: "indicator",
        mode: "gauge+number"
    }
];

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };

var config = {scrollZoom: true};

Plotly.plot("mydiv", data, layout, config);

// "mydiv"：布局div元素，在Redash开发者模式下，只能用element参数传入的布局元素。

// data：数据，对象数组[{}]，用于设置各类图表的各种数据属性。

// layout：布局，对象{}，用于设置图表的各种布局属性，可选参数。

// config：配置，对象{}，用于设置图表的各种配置属性，可选参数。

• Redash开发者模式自定义代码，支持全部自定义取数函数；
• Redash开发者模式自定义图表沙盒运行模式下，会传入5个接口参数：x, ys, element, scheme 和 Plotly。

// x：为x轴返回值数组。
// ys：为y轴返回值数组对象，由于y轴可以多选，用ys.field1等获取对应y轴返回值数组。
// element：为容器div对象。
// scheme：为样式对象，包括style，mode，bg，back，color属性。
// 调用：Plotly.plot(element, data, layout, config)。
x,ys,scheme参数可用于构建上述Plotly.js代码中的data,layout,config属性。

scheme参数如下：

属性	类型	值
style	string	“dropdown”:弹出下拉式菜单 “drawer”:浮出抽屉式菜单 ” windows”: Windows资源管理器 “”:非portal模式
mode	string	“light”:亮白；”dark”:暗黑；”deep”:深蓝；”custom”:-自定义-；””:非portal模式。
bg	string	报表背景颜色 “”:非portal模式
back	string	部件背景颜色 “”:非portal模式
color	string	前景颜色 “”:非portal模式