Google Chart填充动态值 [英] Google Chart Fill with Dynamic value
本文介绍了Google Chart填充动态值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用谷歌饼图。但总是使用固定值之前。现在我改变了从下拉列表值change.i获取的值在asp.net mvc3 razor + ajax + jquery中工作。我怎么能解决这个问题？
控制器：
i am working with google pie chart.but always used fixed value before.now i changed the value which get from dropdown list value change.i working in asp.net mvc3 razor+ajax+jquery. how can i solve this problem?
Controller:
public class HomeController : Controller
{
SurveyReportEntities _entities=new SurveyReportEntities();
public ActionResult Index()
{
return View();
}
public JsonResult DropDownProductName()
{
var ProductList = (from p in _entities.PRODUCTS
select new
{
ProductId = p.product_name,
ProductName = p.product_id
}).ToList();
return new JsonResult() { Data = ProductList };
}
public PartialViewResult GetPieChartData()
{
var data = _entities.sp_chartData(1).ToArray();
return PartialView("PieChartView", data);
}
public PartialViewResult PieChartView()
{
return PartialView();
}
图表页：
Chart Page:
<script type="text/javascript">
$("#ddlProduct").change(function (){
var pid = $("#ddlProduct").val();
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawSalesChart);
function drawSalesChart() {
$.post('@Url.Content("~/Home/GetPieChartData")', { id: 1},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'Quertion Name');
tdata.addColumn('number', 'Answer');
for (var i = 0; i < data.length; i++) {
tdata.addRow([data[i].Name, data[i].Value]);
}
var options = {
title: "Product Survey Chart",
is3D: true,
pieSliceText: "string"
//pieSliceTextStyle: { color: 'white', fontName: 'Helvetica',fontSize:'12px' }
};
var chart = new google.visualization.PieChart(document.getElementById('productStatus'));
chart.draw(tdata, options);
});
}
// });
</script>
<div class="dashboardItem">
<div class="dashboardItemHeader">Product Survey</div>
<div class="dashboardItemBody">
<div id="productStatus" style="height:400px;width:600px">
<div class="ajaxLoading">
</div>
</div>
</div>
</div>
</div>
索引：
Index:
@{
ViewBag.Title = "Index";
//Layout = "../Shared/_Layout.cshtml";
Layout = "../Shared/_MasterLayout.cshtml";
}
<h2>Home</h2>
<br/>
@*<body>*@
<span>Product Name :</span>
<select id="ddlProduct">
<option value="0">--Please Select--</option>
</select>
<br/>
<br/>
@Html.Partial("PieChartView","Home")
推荐答案
（＃ddlProduct ）.change（function（）{
var pid =
("#ddlProduct").change(function (){ var pid =
（＃ddlProduct）。val（）;
google.load（ visual，1，{packages：[corechart]}）;
google.setOnLoadCallback（drawSalesChart）;
function drawSalesChart（）{
("#ddlProduct").val(); google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawSalesChart); function drawSalesChart() {
.post（'@ Url.Content（〜/ Home / GetPieChartData）'，{id：1}，
function（data）{
var tdata = new google.visualization.DataTable （）;
tdata.addColumn（'string'，'Quertion Name'）;
tdata.addColumn（'number'，'Answer'）;
for（var i = 0; i < data。长度; i ++）{ options = {
tdata.addRow（[data [i] .Name， data [i] .Value]）;
}
var
< span class =code-attribute> < span class =code-attribute> title： Product 调查 图表 ，
< span class =code-attribute> is3D： true，
< span class =code-attribute> pieSliceText： string
< span class =code-attribute> // pieSliceTextStyle： < span class =code-attribute> { color： white， fontName： 'Helvetica'，fontSize：'12px' }
};
< span class =code-attribute> var chart = new google.visualization.PieChart（document.getElementById（'productStatus'））;
chart.draw（tdata， options);
});< span class=\"code-attribute\">
}
// });
</script>
<div class=\"dashboardItem\">
<div class=\"dashboardItemHeader\">Product Survey</div>
<div class=\"dashboardItemBody\"> >
<div id=\"productStatus\" style=\"height:400px;width:600px\">
<div class=\"ajaxLoading\">
</div
</div>
</div>
</div>
</div>
.post('@Url.Content("~/Home/GetPieChartData")', { id: 1}, function (data) { var tdata = new google.visualization.DataTable(); tdata.addColumn('string', 'Quertion Name'); tdata.addColumn('number', 'Answer'); for (var i = 0; i < data.length; i++) { tdata.addRow([data[i].Name, data[i].Value]); } var options = { title: "Product Survey Chart", is3D: true, pieSliceText: "string" //pieSliceTextStyle: { color: 'white', fontName: 'Helvetica',fontSize:'12px' } }; var chart = new google.visualization.PieChart(document.getElementById('productStatus')); chart.draw(tdata, options); }); } // }); </script> <div class="dashboardItem"> <div class="dashboardItemHeader">Product Survey</div> <div class="dashboardItemBody"> <div id="productStatus" style="height:400px;width:600px"> <div class="ajaxLoading"> </div> </div> </div> </div> </div>
Index:
Index:
@{
ViewBag.Title = "Index";
//Layout = "../Shared/_Layout.cshtml";
Layout = "../Shared/_MasterLayout.cshtml";
}
<h2>Home</h2>
<br/>
@*<body>*@
<span>Product Name :</span>
<select id="ddlProduct">
<option value="0">--Please Select--</option>
</select>
<br/>
<br/>
@Html.Partial("PieChartView","Home")这篇关于Google Chart填充动态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
