Question

使用Visual Studio 2015 MVC Core 1.1

_Layout.cshtml

加载网站的Javascript API加载。
我在此致电google.charts.load('current', { 'packages': ['corechart', 'table', 'gauge', 'controls'] });

环境变量在项目属性中设置为“开发”。

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!-- Javascript -->
      <environment names="Development">
             <script src="~/lib/jquery/dist/jquery.js"></script>
             <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
             <script src="~/lib/jquery-ui/jquery-ui.js"></script>
             <script src="~/lib/clipboard/dist/clipboard.js"></script>
             <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    
                @*<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>*@          
             <script type="text/javascript">
                    google.charts.load('current', { 'packages': ['corechart', 'table', 'gauge', 'controls'] });
             </script>
             <script src="~/lib/highcharts/highcharts.js"></script>
             <script src="~/js/site.js"></script>                @*Production bundles to site.min.js - always last*@
             <script src="~/js/Script_CodeStudio.js"></script>   @*Production bundles to site.min.js - always last*@
             <script src="~/js/Script_Gcharts.js"></script>      @*Production bundles to site.min.js - always last*@
            </environment>

      <!-- Javascript Page Specific Header-->
      @RenderSection("scripts_head", required: false)
</head>
<body>

<!-- CONTENT -->
@RenderBody() 

<!-- Javascript Page Specific Body-->
@RenderSection("scripts", required: false)

Index.cshtml

包含呈现信息中心所需的<div> ID

包含回调google.charts.setOnLoadCallback();

<div id="div_dashboard_Detail">
      <div id="div_dashboard_Detail_categoryPicker1"></div><br />
      <div id="div_dashboard_Detail_categoryPicker2"></div><br />
      <div id="div_dashboard_Detail_chart"></div>
   </div>

   @section scripts_head{
    <script>
        google.charts.setOnLoadCallback(gChart0);
        function gChart0() {
            drawChart_LogsSelectingEvents_MissedDelivery_test();
        };
    </script>
   }

Google信息中心功能：

我正在尝试加载名为NumberRangeFilter的{{1}}，但收到错误categoryPicker2
如果我删除One or more participants failed to draw()并离开categoryPicker2，表格就会很好。

X

categoryPicker1

我能错过什么？我可以在JSFiddle中使用它，但是一旦我将所有部分重新组合在MVC中，它就不会渲染。 https://jsfiddle.net/hken6xco/35/

感谢您的帮助!!

Answer 1

即使没有数据，仪表板也可以在此处绘制，

未收到任何错误，请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart', 'table', 'gauge', 'controls']
});

function drawChart() {
  //Create DataTable
  var data = new google.visualization.DataTable();

  //Add Columns
  data.addColumn('string', 'Review on Week');
  data.addColumn('string', 'Business Division');
  data.addColumn('string', 'Product');
  data.addColumn('string', 'Cause');
  data.addColumn('string', 'Next Step');
  data.addColumn('string', 'Carrier Reference or Responsible');
  data.addColumn('number', 'Cost');
  data.addColumn('number', 'Quantity');
  data.addColumn('number', 'Age (d)');
  data.addColumn('string', 'Delivery Number');
  data.addColumn('string', 'Material Description');
  data.addColumn('string', '');
  data.addColumn('string', 'Actual State');

  //Create Data View
  var view = new google.visualization.DataView(data);
  view.setColumns([12, 0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11]);

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
      document.getElementById('div_dashboard_Detail'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'div_dashboard_Detail_categoryPicker1',
      'options': {
          'filterColumnIndex': 8
      },
  });

  var categoryPicker2 = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'div_dashboard_Detail_categoryPicker2',
      'options': {
          'filterColumnIndex': 0,     //Column used in control
          'ui': {'label': 'Actual State:'}
      }
  });

  var chart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'div_dashboard_Detail_chart',
      'options': {
          showRowNumber: false,
          width: '100%',
          height: 'auto',
          page: 'enable',
          pageSize: '15',
          sort: 'enable',
          allowHtml: true
      }
  });

  //Object Binding
  dashboard.bind([categoryPicker1, categoryPicker2], [chart]);

  // Draw the dashboard.
  dashboard.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard_Detail">
  <div id="div_dashboard_Detail_categoryPicker1"></div>
  <div id="div_dashboard_Detail_categoryPicker2"></div>
  <div id="div_dashboard_Detail_chart"></div>
</div>

Answer 2

我不确定发生了什么。@ WhahHat感谢您的示例。我的功能最初非常复杂，所以我把它分成了一个只包含仪表板的简单版本。我发现的唯一一个变量是没有在我更复杂的版本中定义。它开始工作但我真的不知道为什么。也许这是Visual Studio中的编译错误，因为我真的没有更改任何代码。

结论：上面的代码也适用于小提琴。

一如既往地感谢您的帮助!!

NumberRangeFilter给出“一个或多个参与者无法绘制（）错误”

2 个答案: