Question

我尝试使用类别选择器和饼图实现谷歌仪表板原型，同时显示数据表。但是，即使在遵循文档（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>

Answer 1

一些问题......

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

对于pieCategoryFilter和＆amp; pieChart conatiner id属性错误，
最后它不应该有资本D ......

坏 - ＆gt; containerID

好 - ＆gt; containerId

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

对于PieChart，数据应该有两列 - ＆gt; 'string'，'number'
示例中的数据表有三列 - ＆gt; 'string'，'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>

一个或多个参与者无法使用Google控制台

1 个答案: