FusionChart 是一個功能強大的 JavaScript 圖表庫,可以讓開發人員快速構建交互式和自適應的圖表。在使用 FusionChart 時,我們可以通過 JSON 格式來傳遞數據,這樣可以幫助我們更加靈活地控制圖表的展示效果。
下面是一個使用 JSON 進行數據綁定的示例:
let data = { "chart": { "caption": "收入與支出", "subCaption": "2021 年度", "xAxisName": "月份", "yAxisName": "金額", "numberPrefix": "$", "theme": "candy" }, "data": [ {"label": "1月", "value": "2000"}, {"label": "2月", "value": "2500"}, {"label": "3月", "value": "3000"}, {"label": "4月", "value": "2800"}, {"label": "5月", "value": "3200"}, {"label": "6月", "value": "3500"}, {"label": "7月", "value": "3900"}, {"label": "8月", "value": "4300"}, {"label": "9月", "value": "4800"}, {"label": "10月", "value": "5100"}, {"label": "11月", "value": "5300"}, {"label": "12月", "value": "5800"} ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "column2d", renderAt: "chart-container", width: "100%", height: "500", dataFormat: "json", dataSource: data }).render(); });
在上面的代碼中,我們定義了一個 JSON 對象data
,它包含了圖表的元數據和數據,然后在創建 FusionChart 實例時,將這個data
對象傳遞給了dataSource
屬性。這樣 FusionChart 就能自動解析數據,并渲染成交互式的圖表了。
總的來說,使用 FusionChart 和 JSON 一起構建圖表非常簡單和靈活,可以滿足開發人員對于數據可視化的各種需求。