[英]Raphael pie chart, putting dynamic data?
我想將動態數據放入拉斐爾餅圖中。 我無法在JavaScript代碼的window.onload()之外編寫以下代碼。 是否有人在rapahael餅圖中添加了動態數據? 這是我當前的代碼:
<script language="javascript" type="text/javascript">
window.onload = function () {
var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.text(320, 100, "Interactive Pie Chart").attr({"font-size": 20});
var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2], {legend: ["%%.%%" , "%%.%%","%%.%%"], legendpos: "west"});
}
</script>
在這個55、20、13、32、5、1、2數據的插入下,我想將數據庫返回的數據寫入我的JSP頁面。 如何添加呢? 我有數據
<c:forEach var="Detail" items="${DetailRow.List.}">'${Detail.Text}',${Detail.Count}</c:forEach>
我想將${Detail.Text}',${Detail.Count}
到餅圖中。 如何將其轉換為([[],[]..])
?
基蘭
如果我對您的理解很好,那么您想要執行以下操作:
window.onload = function () {
var r = Raphael("holder"),
mydata = //AJAX call to get data from Database
//Parse mydata to have the format you need ([[],[]..])...
r.g.piechart(320, 240, 100,mydata);
};
如果您可以在問題中顯示一些代碼,那就好了:)。 但是我相信的想法是,對可以從數據庫獲取數據的腳本進行AJAX調用。
這就是我的方法。 我正在使用ASP.Net MVC,但是您可以使用任何框架或語言。
值,圖例值和扇區鏈接值是在頁面中創建的.Net列表對象。
%>
<script type="text/javascript">
$(document).ready(function () {
<% =truViewPOC.Helpers.GraphaelChartHelper.GetJavaScript(100, 150, 90, title, values, legendValues, sectorLinkValues, null) %>
});
這是我的GetJavaScript方法:
StringBuilder javaScriptBuilder = new StringBuilder();
javaScriptBuilder.Append("window.onload = function () {var r = Raphael('holder');");
AppendCenterCoordinates(ref javaScriptBuilder);
AppendLegendInfo(ref javaScriptBuilder, title);
AppendPieChartInfo(ref javaScriptBuilder, xCoord, YCoord,radius, values, legendValues,sectorLinkValues);
AppendFunctionInfo(ref javaScriptBuilder);
javaScriptBuilder.Append("}");
private static void AppendFunctionInfo(ref StringBuilder javaScriptBuilder)
{
javaScriptBuilder.Append("pie.hover(function () {this.sector.stop();this.sector.scale(1.1, 1.1, this.cx, this.cy);if (this.label) {this.label[0].stop();this.label[0].scale(1.5);this.label[1].attr({ 'font-weight': 800 });}}, function () {this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, 'bounce');if (this.label) {this.label[0].animate({ scale: 1 }, 500, 'bounce');this.label[1].attr({ 'font-weight': 400 });}}); ");
javaScriptBuilder.Append("pie.each(function(){ this.sector.label=this.sector.value; })");
}
private static void AppendPieChartInfo(ref StringBuilder javaScriptBuilder, int xCoord, int YCoord, int radius, List<decimal> values, List<string> legendValues, List<string> sectorLinkValues)
{
javaScriptBuilder.AppendFormat("var pie = r.g.piechart({0},{1},{2},{3},", xCoord, YCoord, radius, ConvertValuesToString(values));
javaScriptBuilder.Append("{");
javaScriptBuilder.AppendFormat("legend: {0}, legendpos: 'east', href:{1}",ConvertValuesToString(legendValues),ConvertValuesToString(sectorLinkValues));
javaScriptBuilder.Append("});");
}
private static void AppendLegendInfo(ref StringBuilder javaScriptBuilder, string title)
{
javaScriptBuilder.Append("r.g.text(140, 24, " + "'" + title + "'" + ").attr({ 'font-size': 16 });");
}
private static string ConvertValuesToString(List<decimal> values)
{
string finalString = "[";
for (int i = 0; i < values.Count; i++)
{
finalString += values[i].ToString();
if (i<values.Count-1)
{
finalString+= ",";
}
}
finalString += "]";
return finalString;
希望對您有所幫助。.如果您對此代碼有任何疑問,請告訴我。 謝謝。 維卡斯}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.