FusionCharts是一款功能強大的圖表庫,用于創建交互式和動態的圖表。使用JSON數據是一種流行的方法,可以將數據與FusionCharts一起使用。以下是在FusionCharts中使用JSON數據的基本步驟:
const dataSource = { "chart": { "caption": "Monthly revenue", "subCaption": "2019", "xAxisName": "Month", "yAxisName": "Revenue (in USD)", "numberPrefix": "$", "theme": "fusion" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ] }; const chartConfig = { type: "column2d", width: "100%", height: "400", dataFormat: "json", dataSource: dataSource }; FusionCharts.ready(function () { var chart = new FusionCharts(chartConfig); chart.render(); });
以上代碼展示了使用JSON數據在FusionCharts中創建一個基本的柱狀圖。將數據對象分配給dataSource變量,該對象包含用于呈現圖表的圖表設置和數據數組。然后,將數據源變量傳遞給chartConfig的dataSource屬性,以便將數據傳遞到chartConfig對象。最后,在chart.render()方法中呈現圖表。
上一篇vue多entry打包