Fatal编程技术网
  • javascript/
  • Javascript 拉斐尔饼图，放动态数据？

Javascript 拉斐尔饼图，放动态数据？

javascript html jsp

Javascript 拉斐尔饼图，放动态数据？,javascript,html,jsp,pie-chart,Javascript,Html,Jsp,Pie Chart,我想把我的动态数据放到raphael饼图中。我无法在javascript代码的window.onload（）之外编写以下代码。有人在rapahael饼图中添加了动态数据吗？这是我当前的代码： <script language="javascript" type="text/javascript"> window.onload = function () { var r = Raphael("holder"); r.g.txtattr.font

我想把我的动态数据放到raphael饼图中。我无法在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>


window.onload=函数（）{
var r=拉斐尔（“持有人”）；
r、 g.txttr.font=“12px‘Fontin Sans’、Fontin Sans、Sans serif”；
r、 g.text（320100，“交互式饼图”）.attr（{“字体大小”：20}）；
var pie=r.g.piechart（320、240、100、[55、20、13、32、5、1、2]，{图例：[“%。%”、“%。%”、“%。%”、“%。%”、“%。%”，legendpos:“west”}）；
}
除了这个55、20、13、32、5、1、2数据，我想将从数据库返回的数据写入JSP页面。我怎样才能补充呢？我有数据

<c:forEach var="Detail" items="${DetailRow.List.}">'${Detail.Text}',${Detail.Count}</c:forE­ach>

'${Detail.Text}'，${Detail.Count}
我想在饼图中添加
${Detail.Text}'，${Detail.Count}
。如何将其转换为
（[[]，[]…]）
？

Kiran

如果我很了解你，你想做这样的事：

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.NETMVC，但您可以使用任何框架或语言

值、legendvalues和sectorLinkValues是在页面中创建的.Net列表对象

%>
<script type="text/javascript">
    $(document).ready(function () {
        <% =truViewPOC.Helpers.GraphaelChartHelper.GetJavaScript(100, 150, 90, title, values, legendValues, sectorLinkValues, null) %>
     });

%>
$（文档）.ready（函数（）{
});

下面是我的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;

StringBuilder javaScriptBuilder=新建StringBuilder（）；
Append（“window.onload=function（）{var r=Raphael（'holder'）；”；
AppendCenterCoordinates（参考javaScriptBuilder）；
AppendLegendInfo（参考javaScriptBuilder，标题）；
AppendPieChartInfo（参考javaScriptBuilder、xCoord、YCoord、radius、values、legendValues、sectorLinkValues）；
AppendFunctionInfo（参考javaScriptBuilder）；
追加（“}”）；
私有静态无效AppendFunctionInfo（参考StringBuilder javaScriptBuilder）
{
javaScriptBuilder.Append（“pie.hover（函数（）{this.sector.stop（）；this.sector.scale（1.1,1.1，this.cx，this.cy））；if（this.label）{this.label[0].stop（）；this.label[1].attr（{'font-weight'：800}；}}），function（）{this.sector.animate（{scale:[1,1,1,this.cx，this.cy]}，500，'bounce'）；if（this.label）{this.label）{this.label）[this.label]），animate]({scale:1}，500，'bounce'）；this.label[1].attr（{'font-weight'：400}）；}}}）；”；
Append（“pie.each（function（）{this.sector.label=this.sector.value；}）”；
}
私有静态void AppendPieChartInfo（参考StringBuilder javaScriptBuilder、int xCoord、int YCoord、int radius、列表值、列表legendValues、列表扇区LinkValues）
{
AppendFormat（“var pie=r.g.piechart（{0}，{1}，{2}，{3}，”，xCoord，YCoord，radius，ConvertValuesToString（值））；
追加（“{”）；
AppendFormat（“图例：{0}，legendpos:'east'，href:{1}”、ConvertValuesToString（legendValues）、ConvertValuesToString（sectorLinkValues））；
追加（“}”）；”；
}
私有静态无效AppendLegendInfo（参考StringBuilder javaScriptBuilder，字符串标题）
{
Append（“r.g.text（140,24，“+”“+title+””“+”）.attr（{'font size'：16}）；”）；
}
私有静态字符串ConvertValuesToString（列表值）
{
字符串finalString=“[”；
for（int i=0；i如果（ii）无法将我的动态数据添加到Graphael饼图中。当我在window.onload（）之外编写它时，以下代码不起作用。var pie=r.g.piechart（320240100[55,20,13,32,5,1,2,10]，{图例：[“%%.%%”，“%%.%%”，“%%.%%”，“%%.%%”，“legendpos:“west”}）；你的问题对我来说似乎还很清楚。@kiran:解释一下动态数据的含义，如果可能的话，在你的问题中写更多的代码。@Nobita:这是我当前的代码窗口。onload=function（）{var r=Raphael（“holder”）；r.g.txttr.font=“12px'Fontin Sans'，Fontin Sans，Sans serif”；r.g.text（320100，“交互式饼图”）.attr（{“字体大小”：20}）；var Pie=r.g.piechart（320240100，[55,20,13,32,5,1,2]，{图例：[“%.%.”，“%.%.”，“%.%.”，“%.%.%.”，legendpos:“west”}；}除了这个55、20、13、32、5、1、2数据之外，我想在jsp页面中写入从数据库返回的数据。我如何添加这些数据呢？我看到了一些东西，比如var labels=[]；var values=[]；for（i in data.items）{var item=data.items[i]；labels.push（item.label）；values.push（item.data）；}var pie=r.g.piechart（320240100，value，{legendpos:labels，legendpos:“west”}）；。这里使用的是哪个数组（data.tems）我想将我的数据插入数据[]数组这是wt i wnt，我有数据“${Detail.Text}”，“${Detail.Count}”我想将${Detail.Text}”，“${Detail.Count}添加到饼图中？我如何将其转换为inot（[[]，[]，[]）这种格式？@kiran:请在主要问题中发布代码。这不仅对你有帮助，而且对整个社区都有帮助。