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模式

匹配结果 ""

    没有匹配结果 ""