FusionCharts是一款流行的JavaScript圖表庫(kù)，可用于創(chuàng)建交互式和響應(yīng)式的數(shù)據(jù)可視化。FusionCharts支持多種圖表類型，如折線圖、柱狀圖、餅圖、散點(diǎn)圖等。以下是FusionCharts的一些主要參數(shù)及其詳細(xì)說(shuō)明：
type：圖表類型。例如：
column2d、column3d、line、pie2d、pie3d、bar2d等。width：圖表寬度。可以是百分比（如
"100%"）或像素值（如"400"）。height：圖表高度?？梢允前俜直龋ㄈ?code style="border: 0px solid rgb(217, 217, 227); box-sizing: border-box; --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,0.5); --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-shadow-colored:0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; font-family: "S?hne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; color: var(--tw-prose-code); font-weight: 600;">"100%"）或像素值（如
"300"）。dataFormat：數(shù)據(jù)格式?？梢允?code style="border: 0px solid rgb(217, 217, 227); box-sizing: border-box; --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,0.5); --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-shadow-colored:0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; font-family: "S?hne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; color: var(--tw-prose-code); font-weight: 600;">"json"、
"xml"、"csv"等。dataSource：圖表數(shù)據(jù)源?？梢允荍avaScript對(duì)象（JSON格式）、XML字符串、CSV字符串或URL。
renderAt：要將圖表渲染到的HTML元素的ID。
以下是FusionCharts的使用示例：
htmlCopy code<!DOCTYPE html><html><head>
<title>FusionCharts Demo</title>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script></head><body>
<div id="chart-container"></div>
<script>
// 圖表數(shù)據(jù)
const dataSource = { "chart": { "caption": "Top 5 Fruits Sold", "subCaption": "Last Week", "xAxisName": "Fruit", "yAxisName": "Sales (in USD)", "numberSuffix": "K", "theme": "fusion"
}, "data": [
{ "label": "Apple", "value": "8100" },
{ "label": "Orange", "value": "5300" },
{ "label": "Banana", "value": "4050" },
{ "label": "Mango", "value": "2350" },
{ "label": "Grape", "value": "1900" }
]
}; // 創(chuàng)建圖表實(shí)例
const chart = new FusionCharts({ type: 'column2d', width: '100%', height: '400', dataFormat: 'json', dataSource: dataSource, renderAt: 'chart-container'
}); // 渲染圖表
chart.render(); </script></body></html>這個(gè)示例中，我們創(chuàng)建了一個(gè)2D柱狀圖（type: 'column2d'），寬度為100%（width: '100%'），高度為400像素（height: '400'），使用JSON格式的數(shù)據(jù)源（dataFormat: 'json'），并將圖表渲染到ID為chart-container的HTML元素中（renderAt: 'chart-container'）。
FusionCharts具有豐富的自定義選項(xiàng)，您可以通過(guò)配置dataSource.chart對(duì)象來(lái)
設(shè)置各種圖表屬性。以下是一些常用的圖表屬性及其說(shuō)明：
- caption：圖表的標(biāo)題。
- subCaption：圖表的副標(biāo)題。
- xAxisName：X軸的名稱。
- yAxisName：Y軸的名稱。
- numberPrefix：數(shù)值前綴，例如：
"￥"。 - numberSuffix：數(shù)值后綴，例如：
"%"。 - theme：圖表的主題。FusionCharts提供了多種內(nèi)置主題，如
"fusion"、"gammel"、"candy"等。 - showValues：是否顯示數(shù)據(jù)點(diǎn)的值。設(shè)置為
"1"表示顯示，"0"表示隱藏。 - decimals：數(shù)值的小數(shù)位數(shù)。
- paletteColors：圖表顏色序列。多個(gè)顏色值以逗號(hào)分隔，例如：
"5D62B5,29C3BE,F2726F"。
以下是一個(gè)使用這些屬性的示例：
javascriptCopy codeconst dataSource = { "chart": { "caption": "Monthly Revenue", "subCaption": "Previous Year", "xAxisName": "Month", "yAxisName": "Revenue (in USD)", "numberPrefix": "$", "numberSuffix": "K", "theme": "fusion", "showValues": "1", "decimals": "0", "paletteColors": "5D62B5,29C3BE,F2726F"
}, "data": [
{ "label": "Jan", "value": "4200" },
{ "label": "Feb", "value": "8100" },
{ "label": "Mar", "value": "7200" },
{ "label": "Apr", "value": "5500" },
{ "label": "May", "value": "9100" },
{ "label": "Jun", "value": "5100" },
{ "label": "Jul", "value": "6800" },
{ "label": "Aug", "value": "6200" },
{ "label": "Sep", "value": "6100" },
{ "label": "Oct", "value": "4900" },
{ "label": "Nov", "value": "9000" },
{ "label": "Dec", "value": "7300" }
]
};此外，F(xiàn)usionCharts還提供了許多高級(jí)功能，如多系列圖表、組合圖表、事件處理等。要了解更多關(guān)于FusionCharts的詳細(xì)信息和選項(xiàng)，請(qǐng)?jiān)L問(wèn)其官方文檔：https://www.fusioncharts.com/dev/。
聲明本文內(nèi)容來(lái)自網(wǎng)絡(luò),若涉及侵權(quán),請(qǐng)聯(lián)系我們刪除! 投稿需知:請(qǐng)以word形式發(fā)送至郵箱[email protected]
非?？?，廣西南寧鐵通