我正在使用ASP.NET和C#。我看到的所有饼图控件只允许为每个类别分配一个值。
但我想要做的是显示一个饼图,每个产品显示多个值。
ASP.NET中是否有这种饼图的解决方案?
答案 0 :(得分:3)
是的,您可以使用Google Charts
Google图表工具功能强大,易于使用且免费。试试我们的 丰富的交互式图表和数据工具库。
Google Charts提供了一种可视化数据的完美方式 网站。从简单的折线图到复杂的分层树图, 图表库提供了大量现成的图表类型。
使用Google Charts的最常用方法是使用简单的JavaScript 你嵌入你的网页。你加载一些谷歌图表库, 列出要绘制的数据,选择自定义图表的选项, 最后创建一个具有您选择的ID的图表对象。然后, 稍后在网页中,您创建一个带有该ID以显示 谷歌图表。
示例强>:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
预览:
答案 1 :(得分:2)
答案 2 :(得分:1)
我建议使用HighCharts(Demo)
他们不依赖Google画廊这样的画布,所以他们可以使用旧版浏览器,他们有灵活的配置模型和大量的示例代码