要实现一个图形报表,我用的是highcharts,
现在前台样式已经出来了,代码如下:
$(function () {
$('#container').highcharts({
//标题部分
title: {
text: '测试',
x: -20 //center
},
subtitle: {
text: '静态测试',
x: -20
},
////X轴提示
xAxis: {
categories: ['张三', '李四', '王五', '傻吊妞', '屌丝东','屌丝勇']
},
//当鼠标指定到某一个值上,就会提示某某"工资"工资只是提示,是我们自定义的
tooltip: {
valueSuffix: '工资'
},
//属性
legend: {
layout: 'vertical',
align: 'right', //共有几个人的工资,在右边提示
verticalAlign: 'middle',
borderWidth: 0
},
//数值以提示
series: [{
name: '一月份工资',
data: [
{
name: '本月工资:',
Color: '#00FF00',
y: 1000,
},]
},]
});
var chaert = $('#container').highcharts();
series = chart.get('series-1');
alert('The first series\' name is ' + series.name);
});
</script>
后台代码:
public void tuxing()
{
DataTable dt = new Eastea.BusLogic.GraphicalGet().Getgraphical();
StringBuilder JsonString = new StringBuilder();
for (var i = 0; i < dt.Rows.Count; i++)
{
//JsonString.Append("" + dt.Rows[i]["name"].ToString() + "");
//JsonString.Append("" + cj + "" + Convert.ToInt32(dt.Rows[i]["chengji"].ToString()) + "");
//JsonString.Append("<br />");
name = dt.Rows[i]["name"].ToString();
cj = Convert.ToInt32(dt.Rows[i]["chengji"].ToString());
Response.Write(name);
Response.Write(cj);
}
Response.End();
}
怎么把后台获取到的name 跟 cj这两个字段的值分别绑定到前台的xAxis 与 series上
highcharts??
我记得我只用过FusionCharts,你说的highcharts我还没用过。
首先你这个要实现的功能是要把服务器端传过来的值给前台js用,你这个要用ajax,调用服务器端然后返回你需要的值
$.ajax({
url: "a.ashx",
data: "name=123",
cache: false,
error: function(e) {
alert("服务器忙或操作过于频繁!");
},
success: function(msg) {
//在这里给你的xAxia,series赋值
}
});
还有你的后台代码返回类型直接是Response.Write,建议你使用ashx一般处理程序(HttpHandler)。
如果你想用FusionCharts插件,我可以提供给你一些参考源码。