1
我目前正在基於來自SQL Server倉庫的JSONP數據的儀表板項目。 我設法配置Kendo數據源來正確讀取JSONP，並確認我的儀表板中的圖表對象和標籤條每個都正確顯示正確的數據，如果所有其他對象都被刪除了，但是當我在屏幕上組合多個圖表時我得到3-4個圖表顯示，並且這些顯示從一個刷新到下一個顯示不同的值。 我的JQuery知識絕對是初學者，來自傳統BI桌面應用程序而不是開發背景，所以我確信我錯過了一些簡單的東西，但我已經通過大量示例和論壇線程無濟於事。 順便提一句，我可以強制標籤條和第一個圖表通過用$（function（）{}）包裝來顯示;但如果我包裝其他圖表，它們都不會出現，並且如果我將所有圖表包裝在一個圖表中，我會得到相同的結果。 我已經包含了我的代碼，提前致謝。圖表不能正確呈現
Andy。
JS
var dscTop1Stats = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop1SourceStatsByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop2Stats = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop2SourceStatsByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop3Stats = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop3SourceStatsByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop1StatsTrend = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop1SourceStatsTrendByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop2StatsTrend = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop2SourceStatsTrendByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop3StatsTrend = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetTop3SourceStatsTrendByUserData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
var dscTop10Sources = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: "http://localhost:52387/Dash/GetRankingBySourcesData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
jsonpCallback: "JsonPCallBack"
}
}
});
$(function() {
$("#tabstrip").kendoTabStrip({
contentUrls: [
"Sources.html",
"Source Types.html",
"Keyword Analysis.html",
"Trend Analysis.html"
],
animation: {
close: {
duration: 1000,
effects: "fadeOut"
},
open: {
duration: 500,
effects: "fadeIn"
}
}
});
$("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
contentUrls: [
'../../Sources.html',
'../../Source Types.html',
'../../Keyword Analysis.html',
'../../Trend Analysis.html'
]
});
$("#chartSummary").kendoChart({
dataSource: dscTop10Sources,
legend: {
position: "left"
},
seriesDefaults: {
labels: {
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series:
[{
type: "column",
field: "SearchStoriesCount",
name: "Searched Stories"
}],
categoryAxis: {
field: "Name",
labels: {
rotation: -45,
font: "10px Arial,Helvetica,sans-serif",
padding: { top: 0 }
},
majorGridLines: {
visible: true
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 300,
line: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= category # - #= value #"
}
});
$("#chartTop1").kendoChart({
dataSource: dscTop1Stats,
title: {
text: "# Times stories searched in 31 days"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series:
[{
field: "StoriesSearched",
name: "Stories Searched"
}],
seriesColors: ["#AF99D7"],
chartArea: {
margin: {
left: -3
},
background: ""
},
categoryAxis: {
field: "AuthorName",
labels: {
rotation: -0,
visible: false
},
majorGridLines: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 2000,
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "N0"
}
});
$("#chartTop2").kendoChart({
dataSource: dscTop2Stats,
title: {
text: "# Times stories searched in 31 days"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series:
[{
field: "StoriesSearched",
name: "Stories Searched"
}],
seriesColors: ["#AF99D7"],
chartArea: {
margin: {
left: -3
},
background: ""
},
categoryAxis: {
field: "AuthorName",
labels: {
rotation: -0,
visible: false
},
majorGridLines: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 2000,
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "N0"
}
});
$("#chartTop3").kendoChart({
dataSource: dscTop3Stats,
title: {
text: "# Times stories searched in 31 days"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series:
[{
field: "StoriesSearched",
name: "Stories Searched"
}],
seriesColors: ["#AF99D7"],
chartArea: {
margin: {
left: -3
},
background: ""
},
categoryAxis: {
field: "AuthorName",
labels: {
rotation: -0,
visible: false
},
majorGridLines: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 2000,
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "N0"
}
});
$("#areaTop1").kendoSparkline({
title: {
text: "31 Day Trend"
},
dataSource: dscTop1StatsTrend,
series: [{
type: "line",
field: "StoriesSearched",
name: "Relevant Stories",
width: 2,
}],
seriesColors: ["#6B5593"],
chartArea: {
width: 350,
height: 80,
background: ""
},
categoryAxis: {
field: "Date"
}
});
$("#areaTop2").kendoSparkline({
title: {
text: "31 Day Trend"
},
dataSource: dscTop2StatsTrend,
series: [{
type: "line",
field: "StoriesSearched",
name: "Relevant Stories",
width: 2,
}],
seriesColors: ["#6B5593"],
chartArea: {
width: 350,
height: 80,
background: ""
},
categoryAxis: {
field: "Date"
}
});
$("#areaTop3").kendoSparkline({
title: {
text: "31 Day Trend"
},
dataSource: dscTop3StatsTrend,
series: [{
type: "line",
field: "StoriesSearched",
name: "Relevant Stories",
width: 2,
}],
seriesColors: ["#6B5593"],
chartArea: {
width: 350,
height: 80,
background: ""
},
categoryAxis: {
field: "Date"
}
});
});
$.getJON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
$.each(top1Stats, function (i, item) {
var content = '<p class="title_text">' + item.AuthorName + '</p>';
$(content).appendTo("#Top1Author");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
$.each(top1Stats, function (i, item) {
var content = '<p class="tag_text">' + item.Tags + '</p>';
$(content).appendTo("#Top1Tags");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) {
$.each(top1Stats, function (i, item) {
var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>';
$(content).appendTo("#Top1UservsTotal");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
$.each(top2Stats, function (i, item) {
var content = '<p class="title_text">' + item.AuthorName + '</p>';
$(content).appendTo("#Top2Author");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
$.each(top2Stats, function (i, item) {
var content = '<p class="tag_text">' + item.Tags + '</p>';
$(content).appendTo("#Top2Tags");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) {
$.each(top2Stats, function (i, item) {
var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>';
$(content).appendTo("#Top2UservsTotal");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
$.each(top3Stats, function (i, item) {
var content = '<p class="title_text">' + item.AuthorName + '</p>';
$(content).appendTo("#Top3Author");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
$.each(top3Stats, function (i, item) {
var content = '<p class="tag_text">' + item.Tags + '</p>';
$(content).appendTo("#Top3Tags");
});
});
$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) {
$.each(top3Stats, function (i, item) {
var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>';
$(content).appendTo("#Top3UservsTotal");
});
});
HTML
<section class="well content-wrapper">
<div class="main_content">
<div class="frame_tabstrip">
<div id="tabstrip">
<ul>
<li class="k-state-active">Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
</ul>
</div>
</div>
<div class="frame_top">
<h2 class="contentTitle"> text here <small>text here</small></h2>
<div id="chartSummary">
</div>
</div>
<div class="frame_bottom">
<h2 class="contentTitle"> text here <small>text here</small></h2>
<div class="summary_bar">
<div class="summary_title">
<div id="Top1Author">
</div>
<div id="Top1Tags">
</div>
</div>
<div class="summary_bullet">
<div id="chartTop1">
</div>
</div>
<div class="summary_area">
<div id="areaTop1">
</div>
</div>
<div class="summary_value">
<div id="Top1UservsTotal" style="text-align:center">
</div>
<div id="Top1UservsTotal_Desc" style="text-align:center">
<p class="tag_text"></p>
</div>
</div>
</div>
<div class="summary_bar">
<div class="summary_title">
<div id="Top2Author">
</div>
<div id="Top2Tags">
</div>
</div>
<div class="summary_bullet">
<div id="chartTop2">
</div>
</div>
<div class="summary_area">
<div id="areaTop2">
</div>
</div>
<div class="summary_value">
<div id="Top2UservsTotal" style="text-align:center">
</div>
<div id="Top2UservsTotal_Desc" style="text-align:center">
<p class="tag_text"></p>
</div>
</div>
</div>
<div class="summary_bar">
<div class="summary_title">
<div id="Top3Author">
</div>
<div id="Top3Tags">
</div>
</div>
<div class="summary_bullet">
<div id="chartTop3">
</div>
</div>
<div class="summary_area">
<div id="areaTop3">
</div>
</div>
<div class="summary_value">
<div id="Top3UservsTotal" style="text-align:center">
</div>
<div id="Top3UservsTotal_Desc" style="text-align:center">
<p class="tag_text"></p>
</div>
</div>
</div>
</div>
</div>
</section>
發現此問題。我在每個數據源上都使用了jsonpCallback：「JsonPCallBack」。編輯每個回調有一個獨特的名稱解決了這個問題（新的它會是愚蠢的）。 –