酷鱼寻宝赢话费

書名： FusionCharts Beginner’s Guide：The Official Guide for FusionCharts Suite
作者名： Sanket Nadhani Pallav Nadhani Shamasis Bhattacharya
本章字數： 242字
更新時間： 2021-08-27 11:58:16

Time for action — powering a chart using JSON data embedded in the page

Create a copy of DataStringMethod.html in the FirstChart folder and name it as DataStringMethodJSON.html.

Change the following lines of code, as highlighted:

<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">
<!--var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId","400", "300", "0", "1" ); myChart.setJSONData('{\"chart": {\ "caption": "Harry\'s SuperMart",\ "subcaption": "Revenue by Year",\ "xaxisname": "Year",\ "yaxisname": "Amount",\ "numberprefix": "$"\ },\"data": [{\ "label": "2009",\ "value": "1487500"\ },{\ "label": "2010",\ "value": "2100600"\ },{\ "label": "2011",\ "value": "2445400"\ }]}'); myChart.render("chartContainer");// -->
</script>
</body>
</html>

View the page in the browser. You should see the same chart as the previous one.

What just happened?

You changed the setXMLData() function to the setJSONData() function and provided JSON data instead of XML data. Also, note how the apostrophe in Harry's SuperMart was escaped in JavaScript so as to form Harry\'s SuperMart. Otherwise, there would have been a conflict of quotes leading to invalid JavaScript syntax.

You can also provide the JSON data to the setJSONData() method as an object, instead of a string, as shown in the following code:

<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">
<!-- var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setJSONData({ "chart": { "caption": "Harry\'s SuperMart", "subcaption": "Revenue by Year", "xaxisname": "Year", "yaxisname": "Amount", "numberprefix": "$" }, "data": [{ "label": "2009", "value": "1487500" },{ "label": "2010", "value": "2100600" },{ "label": "2011", "value": "2445400" }]});
myChart.render("chartContainer");// -->
</script>
</body>
</html>

Here, we have converted the JSON string to a JavaScript object by removing the enclosing string quotation marks and even the \ character that was used for concatenating the string distributed across multiple lines. And that does it all!

Bingo! You are now adept with the basics of FusionCharts. You have learned how to create a FusionCharts, provide XML or JSON data as either URL or string, and even render the chart using pure JavaScript. Now, we are all set to explore additional charts in FusionCharts. First, we will create a chart with more than one series of data, called a multi-series chart in FusionCharts parlance.

官术网_书友最值得收藏!

FusionCharts Beginner’s Guide：The Official Guide for FusionCharts Suite

Time for action — powering a chart using JSON data embedded in the page

What just happened?