How to create pie chart using javascript

问题

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.

This is my HTML code

<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>

回答1:

I know this has been asked years ago, but anyone who might bump into this can see it HERE.

You have to use link attribute, as seen here.

               "link": "JavaScript:populate('411');",

来源：https://stackoverflow.com/questions/29025273/how-to-create-pie-chart-using-javascript

标签

javascript

html

charts

fusioncharts