帆软决策报表如何实现是如果下拉框有具体城市点击查询就显示饼图，如果选择的下拉框没有选择具体哪个城市，点击查询就显示柱状图

Question

帆软决策报表如何实现是如果下拉框有具体城市点击查询就显示饼图，如果选择的下拉框没有选择具体哪个城市，点击查询就显示柱状图

Answer 1

引自免费微信小程序：皆我百晓生

在帆软 Decision report 中，要实现根据下拉框的选择动态改变图表类型（饼图或柱状图），可以采用数据集过滤与条件渲染的方法。首先，你需要准备两个数据集，一个用于饼图，一个用于柱状图。然后通过逻辑判断来决定展示哪个数据集和哪种类型的图表。

以下是步骤：

1. 创建数据集：

   • 数据集1：包含所有城市的汇总数据，适合用作柱状图。
   • 数据集2：包含每个城市的明细数据，适合用作饼图。

2. 设置下拉框参数：

   • 建立一个下拉框参数，用于选择城市。例如，名为cityParam。

3. 在页面上添加两个图表控件：

   • 图表1：绑定到数据集1，初始时默认为柱状图。
   • 图表2：绑定到数据集2，隐藏，初始时默认为饼图。

4. 为下拉框设置触发器：

   • 触发器类型：参数变化事件。
   • 触发动作：执行JavaScript脚本。

5. 编写JavaScript脚本：

// 获取当前下拉框参数值
var citySelected = this.getParaValue("cityParam");

// 如果选择了具体的城市
if (citySelected) {
  // 显示饼图，隐藏柱状图
  this.showElement("chart2");
  this.hideElement("chart1");
  
  // 清空饼图的数据源过滤条件
  var chart2Ds = this.getDataSet("chart2Ds");
  chart2Ds.clearFilter();
  
  // 添加饼图的数据源过滤条件，只显示所选城市的数据
  chart2Ds.setFilterCondition("city", "=", citySelected);
} else {
  // 没有选择城市，显示柱状图，隐藏饼图
  this.hideElement("chart2");
  this.showElement("chart1");
}

1. 将此脚本保存并应用到下拉框参数的触发器中。

这样，当用户从下拉框中选择某个城市时，图表会切换到饼图，并且仅显示所选城市的数据。如果没有选择城市，则图表会切换回柱状图，显示所有城市的汇总数据。

注意：在实际操作时，你需要将上述步骤中的元素名称（如"chart1"、"chart2"、"chart2Ds"）替换为你的实际图表和数据集名称。同时确保你的数据源已经正确连接并且包含了所需的城市字段（如"city"）。