知识库

# 传入看版参数

js

<script>
var myChartListener =
{
    onRender: function(chart)
    {
        var run_date = (dashboard.renderContextAttr("run_date") || "2021-06-22" );
        chart.dataSetParamValues(0, {"sys_computerName":"bjgc","run_date":"2021-06-19"});
    }
};
</script>
1
2
3
4
5
6
7
8
9
10

html

<div dg-chart-listener="myChartListener" class="chart" dg-chart-widget="1a61013b6179f9c00ea5"></div>
1

提示

dataSetParamValues

传入多个参数，参数为json对象

dataSetParamValue

传入单个参数,chart.dataSetParamValue(0, "sqlParam", name);

# 表单联动图表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.dg-chart{
  display: inline-block;
  width: 300px;
  height: 300px;
}
</style>
<script type="text/javascript">
var dashboarForm =
{
  items:
  [
    {
      name: "sys_computerName", inputType: "select",
      inputPayload:
      [
        {name: 'bjgc',value: 'bjgc'}
      ],
      //将此输入项的值分别设置为chart0、chart1的第0个数据集的第0个参数值
      link: [{chart: "bjgc"}]
    },
    {
      name:"run_date", inputType:"date",
      //将此输入项的值分别设置为chart0、chart1的第0个数据集的第1个参数值
      link: [{chart: 0, param: {"sys_computerName":"bjgc","run_date":"2021-06-19"}}]
    }
  ],
  //当表单提交时，联动图表chart0、chart1
  link: ["chart0"]
};

var myChartListener =
{
    onRender: function(chart)
    {
        var run_date = (dashboard.renderContextAttr("run_date") || "2021-06-22" );
        chart.dataSetParamValues(0, {"sys_computerName":"bjgc","run_date":run_date});
    }
};
</script>
</head>
<body class="dg-dashboard">
  <form dg-dashboard-form="dashboarForm" class="dg-inline">
    
  </form>
<div id="chart0" dg-chart-listener="myChartListener"  class="dg-chart" dg-chart-widget="1a61013b6179f9c00ea5"><!--服务器监控--></div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# 通过表单渲染图表

  <form>
      <select name="sys">
          <option value="ab">ab</option>
      </select>
      <button type="submit">提交</button>
  </form>
  
  var myChartListener =
  {
      onRender: function(chart)
      {
          var run_date = (dashboard.renderContextAttr("run_date") || "2021-06-22" );
          chart.dataSetParamValues(0, {"sys_computerName":"bjgc","run_date":run_date});
      }
  };
  
  <div id="chart0" dg-chart-listener="myChartListener"  class="dg-chart" dg-chart-widget="1a61013b6179f9c00ea5"><!--服务器监控--></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 多个图表联动显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.dg-chart{
  display: inline-block;
  width: 300px;
  height: 300px;
}
</style>
</head>
<body class="dg-dashboard">
    <div>1</div>
  <div id="chart0" class="dg-chart"  dg-chart-widget="1a61013b6179f9c00ea5" dg-chart-link="{target:'chart1',data:{'sys_computerName':0,'run_date':1}}"></div>
<div>2</div>
<div id="chart1" class="dg-chart" dg-chart-widget="1a61013b6179f9c00ea5"><!--服务器监控--></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

提示

在div图表元素上定义dg-chart-link属性，即可设置图表联动功能。

下面的示例中，当点击chart0的图表条目时，将条目数据对象的name属性值设置为 chart1图表的第0个数据集的第0个参数值，然后刷新chart1图表：

<div id="chart0" dg-chart-widget="..." dg-chart-link="{target:'chart1',data:{name:0}}"></div>
<div id="chart1" dg-chart-widget="..."></div>
1
2

←