JavaScript圖表工具FusionCharts Suite XT入門教程（四）：配置圖表
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。
FusionCharts Suite XT現已更新至3.14.0-sr.1版本，FusionCharts Angular包裝器現在與Angular 8兼容并修復了一些bug。
點擊下載FusionCharts Suite XT最新試用版
使用Plain JS配置圖表
FusionCharts Suite XT包含高級功能，可讓您向圖表添加更多上下文并簡化數據可視化。這些功能包括圖表更新，注釋，趨勢線和事件。
本文重點介紹如何：
更新圖表數據
更新圖表屬性
更新圖表數據
下面顯示了配置為動態更新數據值的圖表（單擊“ 更新圖表數據以啟動”）：
上面示例的完整代碼如下：
import FusionCharts from "fusioncharts";import Charts from "fusioncharts/fusioncharts.charts";import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: "column2d",
renderAt: "chart-container",
width: "700",
height: "400",
dataFormat: "json",
dataSource: {
// Chart Configuration
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subCaption: "In MMbbl = One Million barrels",
xAxisName: "Country",
yAxisName: "Reserves (MMbbl)",
numberSuffix: "K",
theme: "fusion"
},
// Chart Data
data: [
{
label: "Venezuela",
value: "290"
},
{
label: "Saudi",
value: "260"
},
{
label: "Canada",
value: "180"
},
{
label: "Iran",
value: "140"
},
{
label: "Russia",
value: "115"
},
{
label: "UAE",
value: "100"
},
{
label: "US",
value: "30"
},
{
label: "China",
value: "30"
}
]
},
events: {
beforeRender: function(evt, args) {
var controls = document.createElement("div"),
chartRef = evt.sender;
chartRef.getRandomNumber = function() {
var max = 300,
min = 50;
return Math.round((max - min) * Math.random() + min);
};
updateData = function() {
//clones data
var data = Object.assign({}, chartRef.getJSONData());
data.data[2].label = "Canada";
data.data[2].value = chartRef.getRandomNumber();
data.data[3].label = "Iran";
data.data[3].value = chartRef.getRandomNumber();
chartRef.setJSONData(data);
};
controls.innerHTML =
'Update chart data';
controls.style.cssText = "text-align: center; width: 100%;";
args.container.appendChild(controls);
}
}}); // RenderchartInstance.render();上圖通過以下步驟呈現：
1、使用包括必要的庫和組件import。例如fusioncharts圖書館等
2、將圖表和主題添加為依賴項。
3、使用圖表選項創建圖表的實例。在JSON對象中：
將圖表類型設置為column2d。
設置圖表的寬度和高度（以像素為單位）。
將設置dataFormat為JSON。
將json數據嵌入為的值dataSource。
4、生成隨機數據以使用Math.random（）更新圖表。
5、添加事件處理程序以更新圖表按鈕。
6、添加該updateData()功能以在單擊按鈕時隨機更新圖表的值。
7、添加，在innerHTML中創建button內部
更新圖表屬性
下面顯示了配置為動態更新圖表標題，子標題對齊方式和圖表背景的圖表（單擊圖表下方顯示的任何一個按鈕可更改圖表背景和標題，子標題對齊方式）：
上面示例的完整代碼如下：
import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
// Chart Configuration
"chart": {
"caption": "Countries With Most Oil Reserves [2017-18]",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion",
},
// Chart Data
"data": [{
"label": "Venezuela",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Canada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
},
events: {
"beforeRender": function(evt, args) {
var chartRef = evt.sender;
chartRef.originalData = JSON.parse(JSON.stringify(chartRef.getJSONData()));
chartRef.changeBackground = function() {
var data = chartRef.getJSONData(); //copy of object
data.chart.bgColor = '#efefef';
chartRef.setJSONData(data);
};
// Resets all the chart data to it's initial verison
chartRef.resetAttr = function() {
chartRef.setJSONData(chartRef.originalData);
};
// Makes the caption text left aligned
chartRef.makeCaptionLeft = function() {
var data = chartRef.getJSONData();
data.chart.captionAlignment = 'left';
chartRef.setJSONData(data);
};
var btnContainer = document.createElement('div'),
str;
// buttons
str = 'Change Chart Background  ';
str += 'Make Caption Text Left-Aligned  ';
str += 'Reset Attributes';
btnContainer.style.cssText = "text-align: center; width: 100%; margin: 10px;";
btnContainer.innerHTML = str;
//button attachment
args.container.parentNode.insertBefore(btnContainer, args.container.nextSibling);
},
"renderComplete": function(evt, args) {
var chartRef = evt.sender,
bgColorBtn = document.getElementById('bgColorBtn'),
captionAlignBtn = document.getElementById('captionAlignBtn'),
resetAttrBtn = document.getElementById('resetAttrBtn');
bgColorBtn.onclick = chartRef.changeBackground;
captionAlignBtn.onclick = chartRef.makeCaptionLeft;
resetAttrBtn.onclick = chartRef.resetAttr;
}
}});// RenderchartInstance.render();1、使用包括必要的庫和組件import。例如fusioncharts圖書館等
2、將圖表和主題添加為依賴項。
3、使用圖表選項創建圖表的實例。在JSON對象中：
將圖表類型設置為column2d。
設置圖表的寬度和高度（以像素為單位）。
將設置dataFormat為JSON。
將json數據嵌入為的值dataSource。
4、beforeRender 函數用于設置圖表屬性。
changeBackground 更新了圖表的背景。
makeCaptionLeft 將標題文本設置為左對齊。
resetAttr 將圖表數據重置為其初始狀態。
5、btnContainer創建按鈕里面
6、調用該renderComplete函數以返回呈現的圖表。
=====================================================
想要了解或購買FusionCharts Suite XT正版授權的朋友歡迎咨詢
關注“慧聚IT”微信公眾號，及時獲取產品最新消息和最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線