1
使用Visual Studio 2015年MVC核心1.1NumberRangeFilter給 「一個或多個參與者未能得出（）錯誤」
_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> }
谷歌儀表板功能：
- 我試圖加載
NumberRangeFilter稱爲categoryPicker2，但得到的錯誤One or more participants failed to draw() - 如果我刪除
categoryPicker2離開categoryPicker1，表呈現就好了。
X
function drawChart_LogsSelectingEvents_MissedDelivery_test() {
var urlString = '../Logs/clnLogsSelectingEvents?grade=All&SC=1&CauseSC=3';
$.ajax({
type: 'GET',
dataType: 'json',
contentType: "application/json",
//url: urlString, //I have commented out but this is my original source.
success: function (result) {
//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'); //inserted
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');
//Add Rows
var dataArray = [];
for (i = 0; i < 10; i++) {
//manually push data into table
dataArray.push([
'string1',
'string2' + i,
'string3',
'string4',
'string5',
'string6',
10,
20,
5 + i,
'string7',
'string8',
'string9',
'string10'
]);
}
data.addRows(dataArray);
//Options
var options = {
width: '100%',
page: 'enable',
pageSize: '3'
};
//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': 'CategoryFilter',
'containerId': 'div_dashboard_Detail_categoryPicker1',
'options': {
'filterColumnIndex': 2,
'ui': {
'label': 'Business Division:'
}
}
});
//THIS IS MY PROBLEM - SLIDER WILL NOT RENDER
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'div_dashboard_Detail_categoryPicker2',
'options': {
'filterColumnIndex': 8 //Age (d)
},
'state': { 'lowValue': 0, 'highValue': 7 }
});
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);
} //END success: function (result) {
}); //END $.ajax({
} //END function drawChart()
什麼可能我會丟失？我可以得到它的工作的jsfiddle但一旦我把所有的碎片重新走到一起在MVC它不渲染。 https://jsfiddle.net/hken6xco/35/
感謝您的幫助！
是有什麼你忽略了這是造成問題？ 'jsapi/ext。js'不需要，只需要'loader.js' ... - 請分享一個樣本的數據 – WhiteHat
謝謝你這麼快回答！我發現唯一不同的是我如何獲得回調。 – cmill
想到數據中的某些東西可能會導致問題。因爲它沒有任何工作，你能分享一個樣本嗎？ – WhiteHat