Круговая диаграмма Рафаэля, выкладывающая динамические данные? - PullRequest
Новая
       8

Круговая диаграмма Рафаэля, выкладывающая динамические данные?

0 голосов
/ 14 апреля 2011

Я хочу поместить свои динамические данные в круговую диаграмму Рафаэля. Я не могу написать следующий код за пределами window.onload () моего кода JavaScript. Кто-нибудь добавил динамические данные в круговую диаграмму Рапаэля? Это мой текущий код: 

<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:forE­ach>

Я хочу добавить ${Detail.Text}',${Detail.Count} в круговую диаграмму. Как я могу преобразовать это в ([[],[]..])?

Ответы [ 2 ]

0 голосов
/ 25 апреля 2011

Вот как я это делаю.Я использую ASP.Net MVC, но вы можете использовать любой фреймворк или язык.

Значения, legendvalues ​​и sectorLinkValues ​​представляют собой объект .Net List, созданный на странице. 

%>
<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;

Надеюсь, это поможет ... Дайте мне знать, если у вас есть какие-либо вопросы по поводу этого кода.Благодарю.Викас}

0 голосов
/ 14 апреля 2011

Киран,

Если я вас правильно понял, вы хотите сделать что-то вроде этого: 

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-вызов скрипта, который может получать данные из базы данных.

...