c#asp.net与flotr2的数据绑定
我知道如何将Datatable绑定到中继器和Datalist,并使用c#asp.net与flotr2的数据绑定,c#,asp.net,pie-chart,flotr2,C#,Asp.net,Pie Chart,Flotr2,我知道如何将Datatable绑定到中继器和Datalist,并使用 我知道如何使用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"
我知道如何使用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>
(功能基本图(容器){
变量
d1=[[0200]],
d2=[[0,60]],
d3=[[0,6]],
d4=[[0,80]],
d5=[[0,20]],
图表
graph=Flotr.draw('容器',
[{data:d1,标签:'参加'},{data:d2,标签:'不参加'},{data:d3,标签:'不尝试'},{data:d4,标签:'不可到达'},{data:d5,标签:'未决定'},
{
阴影大小:4,
颜色:[“BAC463”、“C5B59C”、“B88898”、“FFAC84”、“7BBDAF”],
网格:{Verticalline:false,horizontalLines:false,outlineWidth:0},
xaxis:{showLabels:false},
yaxis:{showLabels:false},
饼图:{show:true,explode:4,labelFormatter:function(total,value){return value;},
鼠标:{track:true},
图例:{show:false,位置:'se',背景色:'#D2E8FF'}
}
);
})(document.getElementById(“editor-render-0”);
这是我的主要问题
如何动态更新饼图数据,以便在绑定数据表时显示其正确内容。
基于我的演示饼图。我需要显示总共5个数据,即
出席、不出席、不尝试、无法到达、未决定
我可以有多条记录包含这5个总数,其中任何一条记录的值都可以为0,但不能同时为所有记录的值
并且是否可以将特定颜色绑定到特定数据?
比如我想给主治医生的派是绿色的而不是红色的等等。。。因为我的演示会自动使用默认颜色的序列。例如,当NotAttending=0时,我不应再显示它,但颜色仍应与各自的数据保持一致。这意味着红色不应该再被使用。但我真的很难弄清楚这一点,因为flotr2缺乏文档和样本
我希望有人能帮助我。提前谢谢。我已经解决了我的问题,但我使用了谷歌的可视化。我使用了一个数据列表,并将javascript放在数据列表的
标记中
<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>
load(“可视化”、“1”、{packages:[“corechart”]});
setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[‘状态’、‘总客人’],
[‘出席’,],
[‘不出席’,],
['未决定',],
[‘无法到达’,],
[‘待定’,]
]);
变量选项={
标题:“”,
切片:{0:{color:'#a0d2af'},1:{color:'#f1a99b'},2:{color:'#dac0c3'},3:{color:'#a8d7dd'},4:{color:'#fed9a2'},
图例:{位置:'无'},
请输入文本:“无”
};
var chart=new google.visualization.PieChart(document.getElementById());
图表绘制(数据、选项);
}
我必须将事件Id添加到每个chart-div
目前,可视化中的颜色比flotr2更好,因为您可以为数据指定一个永久的颜色索引,而flotr2的文档中不清楚如何执行此操作。如果在饼图中为数据输入0值,则不会显示该数据,也不会显示指定给该索引的颜色。在flotr2中,如果值为0,则可以看到饼图中有一行。我认为这只是边界,但在撰写本文时,通过可视化仍然做得更好