c# asp.net数据绑定与flotr2

本文关键字：flotr2 数据绑定 net asp | 更新日期: 2023-09-27 18:15:02

我知道如何将Datatable绑定到Repeaters和Datalist，并使用

显示它们的内容

<%# Eval("FieldName")%>

我知道如何使用flotr2创建一个演示饼状图

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
    <script type="text/javascript" src="https://raw.github.com/ekoontz/flotr/master/flotr/flotr-0.2.0-alpha.js"></script>
</head>
<body>
    <div id="container" style="width:350px;height:300px;" ></div>
    <script type='text/javascript'>
        (function basic_pie(container) {
              var
                d1 = [[0, 200]],
                d2 = [[0, 60]],
                d3 = [[0, 6]],
                d4 = [[0, 80]],
                d5 = [[0, 20]],
                graph;
                graph = Flotr.draw('container', 
                    [{ data : d1, label : 'Attending'},{ data : d2, label : 'Not Attending' },{ data : d3, label : 'No Attempts' }, { data : d4, label : 'Unreachable' }, { data : d5, label : 'Undecided' }], 
                    {
                        shadowSize: 4,
                        colors: ['#BAC463', '#C5B59C', '#B88898', '#FFAC84', '#7BBDAF'],
                        grid : { verticalLines : false, horizontalLines : false, outlineWidth: 0 },
                        xaxis : { showLabels : false },
                        yaxis : { showLabels : false },
                        pie : { show : true, explode : 4, labelFormatter: function(total, value) { return value;} },
                        mouse : { track : true },
                        legend : { show: false, position : 'se', backgroundColor : '#D2E8FF'}
                    }
                );
            })(document.getElementById("editor-render-0"));
    </script>
</body>

这是我的主要问题

我如何动态更新我的饼图数据，以便当我绑定一个数据表时，它将显示其适当的内容。

基于我的演示饼图。我需要显示总共5个数据，即

主治医师，未主治医师，未尝试，无法联系，未决定

我可以用这5个总数有多个记录，并且可以为其中任何一个记录设置0值，但不能同时为所有记录设置0值。

以及是否可以将特定颜色绑定到特定数据?

比如我想让主治医生的馅饼部分是绿色的，而不是红色的，等等…因为在我的演示中它会自动使用默认颜色的序列。例如，当notattend = 0时，我不应该再显示它，但颜色仍然应该与各自的数据一致。意思是红色不能再用了。但是我在解决这个问题上真的有困难，因为缺乏flotr2的文档和示例。

我希望有人能帮我解决这个问题。

c# asp.net数据绑定与flotr2

我已经解决了我的问题，但我使用了谷歌的可视化。我使用了一个数据列表，并将javascript放在数据列表

的<ItemTemplate></ItemTemplate>标签内。
<script type="text/javascript">
                    google.load("visualization", "1", { packages: ["corechart"] });
                    google.setOnLoadCallback(drawChart);
                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                            ['Status', 'Total Guest'],
                            ['Attending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 1) %>],
                            ['Not Attending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 2) %>],
                            ['Undecided', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 3) %>],
                            ['Unreachable', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 4) %>],
                            ['Pending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 5) %>]
                            ]);
                        var options = {
                            title: '',
                            slices: { 0: { color: '#a0d2af' }, 1: { color: '#f1a99b' }, 2: { color: '#dac0c3' }, 3: { color: '#a8d7dd' }, 4: { color: '#fed9a2'} },
                            legend: { position: 'none' },
                            pieSliceText: 'none'
                            };
                        var chart = new google.visualization.PieChart(document.getElementById(<%# "'chart-div-" + Eval("EventId") + "'" %>));
                            chart.draw(data, options);
                            }
                </script>

我必须为每个图表div添加事件Id。

目前，可视化中的

Colors比flotr2更好，因为您可以为数据的每个索引指定颜色，并且在flotr2的文档中不清楚如何做到这一点。如果将饼图中的数据设置为0，则不会显示该数据，也不会显示分配给该索引的颜色。而在flotr2中，如果您的值为0，则可以看到饼图中有一条线。我认为这只是边界，但在写这篇文章的时候，通过可视化仍然做得更好。

相关文章：