[英]c# asp.net data binding with flotr2
我知道如何将Datatable绑定到Repeater和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值,但不是一次所有都可以。
还有可能将特定颜色绑定到特定数据吗?
就像我希望“参加”部分为绿色,“未参加”部分为红色,等等...因为演示中发生的事情是自动使用默认颜色的顺序。 例如,当NotAttending = 0时,我应该不再显示它,但颜色仍应与它们各自的数据相同。 意味着不应再使用红色。 但是由于缺少有关flott2的文档和样本,我确实很难解决这个问题。
我希望有人可以帮助我。 提前致谢。
我已经解决了我的问题,但是我使用了Google的可视化工具。 我使用了一个数据列表,并将javascript放在DataList的<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>
我必须将事件ID添加到每个chart-div。
目前,可视化中的颜色要比flotr2更好,因为您可以为数据索引分配颜色,并且在flotr2的文档中尚不清楚该如何做。 如果在饼图中将数据的值设置为0,则不会显示该值,并且不会显示分配给该索引的颜色。 在flotr2中,如果值为0,则可以看到饼图内部有一行。 我认为这只是边界,但是在撰写本文时,通过可视化仍然可以做得更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.