如何使用javascript创建饼图 [英] How to create pie chart using javascript
本文介绍了如何使用javascript创建饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用javascript创建了一个饼图，我的数据存储在mongodb中。
在我的图表中，我可以分离饼图。
I have created a pie chart using javascript and my data is stored in mongodb. In my chart I am able to separate slices of pie chart.
这是每当我滚动我的鼠标在任何切片，它显示的数据。
That is whenever I roll on my mouse on any of the slices it is showing the data.
但我的要求是，如果我点击任何一个切片，它应该显示一些表中的数据。
But my requirements are, that if I click any of the slice of it, it should display the data in some table.
这是我的HTML代码
<html>
<head>
<title>Pie chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
type: "pie2d",
renderAt: "chart-container",
width: "450",
height: "350",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Split of Visitors by Age Group",
"subCaption": "Last year",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"showHoverEffect":"1",
"showLegend": "1",
"legendBgColor": "#ffffff",
"legendBorderAlpha": '0',
"legendShadow": '0',
"legendItemFontSize": '10',
"legendItemFontColor": '#666666'
},
"data": [
{
"label": "Teenage",
"value": "1250400"
},
{
"label": "Adult",
"value": "1463300"
},
{
"label": "Mid-age",
"value": "1050700"
},
{
"label": "Senior",
"value": "491000"
}
]
}
});
revenueChart.render("chart-container");
});
</script>
</head>
<body>
<div id="chart-container"></div>
</body>
</html>
推荐答案
我知道这是多年前问的，谁可能碰到这个可以看到 这里 。
I know this has been asked years ago, but anyone who might bump into this can see it HERE.
您必须使用链接属性，如此处。
"link": "JavaScript:populate('411');",
这篇关于如何使用javascript创建饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
