代码之家 › 专栏 › 技术社区 › nilesguo

一个或多个参与者未能使用google dashboard绘制()

google-visualization google-api charts google-app-engine javascript

nilesguo · 技术社区 · 7 年前

我试图实现一个带有类别选择器和饼图的google dashboard原型,同时显示datatable。但是,即使在遵循文档中的示例代码时( https://developers.google.com/chart/interactive/docs/gallery/controls#5-create-control-and-chart-instances ),我仍然遇到问题,错误消息为:“一个或多个参与者未能绘制()。

我似乎不知道我的Javascript有什么问题,如果有任何帮助,我将不胜感激!

google.charts.load('current', {packages: ['corechart', 'table', 'controls', 'gauge']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard(){

var data = google.visualization.arrayToDataTable([
    ['Category', 'Objective', 'Cost'],
    ['Freshwater Withdraw Cost', 'Financial Cost', 4.2],
    ['Storage Cost', 'Financial Cost', 4.3],
    ['Onsite Treatment Cost', 'Financial Cost', 13.9],
    ['Disposal Cost', 'Financial Cost', 0.06],
    ['Piping Cost', 'Financial Cost', 6.9],
    ['Trucking Cost', 'Financial Cost', 5.5],
    ['NH3 Cost', 'Environmental Cost', 1.3],
    ['NOX Cost', 'Environmental Cost', 1.2],
    ['PM25 Cost', 'Environmental Cost', 2.1]
]);

var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div',
    'options': {

    }
});

var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));

var pieCategoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerID': 'programmatic_control_div',
    'options': {
        'filterColumnLabel': 'Objective',
        'allowTyping': false,
        'allowMultiple': false
    }
});

var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerID': 'chart_div',
    'options': {
        'width': 300,
        'height': 300,
        'title': 'Total Cost Breakdown'
    }
});

dashboard.bind(pieCategoryFilter, [pieChart, table]);
dashboard.draw(data);
}

和我的html:

<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
<p style="padding-left: 1em"><strong>Total Cost Breakdown</strong></p>
<table class="columns">
<tr>
    <td>
    <div id="programmatic_control_div"></div>
    </td></tr>
<tr>
    <td>
    <div id="chart_div" style="padding-top: 15px"></div>
    </td>
    <td>
    <div id="table_div" style="padding-top: 30px"></div>
    </td></tr></table>
</div>

1 回复 | 直到 7 年前

WhiteHat 7 年前

有几个问题。。。

1) 包装器属性名称区分大小写

对于两者 pieCategoryFilter & pieChart conatiner id属性错误,
它的结尾不应该有大写D。。。

错误--> containerID

好--> containerId

2) 每种图表类型都有特定的数据格式

对于 PieChart 数据应该有两列--> 'string' , 'number'
示例中的数据表有三列--> '字符串' , '字符串' , '编号'

可以使用包装器上的视图从数据表中选择某些列

var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
        'width': 300,
        'height': 300,
        'title': 'Total Cost Breakdown'
    },
    'view': {
      columns: [0, 2]  // <-- set view for first and last columns from data
    }
});

请参阅以下工作段。。。

google.charts.load('current', {packages: ['corechart', 'table', 'controls', 'gauge']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard(){
  var data = google.visualization.arrayToDataTable([
      ['Category', 'Objective', 'Cost'],
      ['Freshwater Withdraw Cost', 'Financial Cost', 4.2],
      ['Storage Cost', 'Financial Cost', 4.3],
      ['Onsite Treatment Cost', 'Financial Cost', 13.9],
      ['Disposal Cost', 'Financial Cost', 0.06],
      ['Piping Cost', 'Financial Cost', 6.9],
      ['Trucking Cost', 'Financial Cost', 5.5],
      ['NH3 Cost', 'Environmental Cost', 1.3],
      ['NOX Cost', 'Environmental Cost', 1.2],
      ['PM25 Cost', 'Environmental Cost', 2.1]
  ]);

  var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {

      }
  });

  var dashboard = new google.visualization.Dashboard(
  document.getElementById('dashboard_div'));

  var pieCategoryFilter = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'programmatic_control_div',
      'options': {
          'filterColumnLabel': 'Objective',
          'allowTyping': false,
          'allowMultiple': false
      }
  });

  var pieChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',
      'options': {
          'width': 300,
          'height': 300,
          'title': 'Total Cost Breakdown'
      },
      'view': {
        columns: [0, 2]
      }
  });

  dashboard.bind(pieCategoryFilter, [pieChart, table]);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <p style="padding-left: 1em"><strong>Total Cost Breakdown</strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="programmatic_control_div"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="chart_div" style="padding-top: 15px"></div>
      </td>
      <td>
        <div id="table_div" style="padding-top: 30px"></div>
      </td>
    </tr>
  </table>
</div>