FusionCharts使用

示例HTML代码（放置到JS目录下，其他目录需要重新调整以下SRC路径）：

<head>

<script type="text/javascript" src="fusioncharts.js"></script>

<script type="text/javascript" src="themes/fusioncharts.theme.carbon.js"></script>
</head>
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>

<script type="text/javascript" src="fusioncharts.js"></script>

<script type="text/javascript" src="themes/fusioncharts.theme.carbon.js"></script>
<script type="text/javascript">
//STEP 2 - Chart Data
const chartData = [{
"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"
}];

//STEP 3 - Chart Configurations
const chartConfig = {
type: 'column3d',
renderAt: 'chart-container',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
// Chart Configuration
"chart": {
"caption": "大标题",
"subCaption": "小标题",
"xAxisName": "纵坐标",
"yAxisName": "横坐标",
"numberSuffix": "单位",
"theme": "carbon",
},
// Chart Data
"data": chartData
}
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});

</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

其中chartConfig的type后面3d改为2d即为平面图

column：柱状图

pie:饼图

line：曲线图（后面不跟2d/3d）

dataSource里的chart的theme后面跟主题，主题从js\themes目录下每个文件的最后字段命名，比如fusioncharts.theme.carbon.js 就是"theme": "carbon",

FusionCharts使用相关推荐

Gantt Chart in JavaScript (HTML5) | FusionCharts
Gantt Chart in JavaScript (HTML5) | FusionCharts
FusionCharts下载地址汇总及更新介绍
本文主要整理了近3年来FusionCharts图表的历史版本下载地址,共享给大家.>>>下载最新版本FusionCharts v3.2.2-SR5 >>>Fusio ...
FusionCharts简明教程（一）---建立FusionCharts图形
由于该项目需要的报告需要做的事情,选择FusionCharts作为一种工具. 由于该报告没有任何接触,网上有没有更具体fusionCharts课程,所以我们决定做一个彻底的研究FusionCharts ...
FusionCharts参数的详细说明
FusionCharts参数的详细说明和功能特性功能特性 animation 是否动画显示数据,默认为1(True) showNames ...
Fusioncharts图表组件API参考方法（Functions）汇总篇（续）
[摘要]: chartType()FusionCharts的JavaScript类API提供了大量的功能.下面的列表显示在每个功能的详细信息: 一.FusionCharts的类 - 实例功能 1.co ...
FusionCharts Free（3）
来看一个使用dataURL方式指定图表数据源的例子: <div id="chartdiv" align="center"></div> ...
JS图表工具FusionCharts调整图表百分比大小
2019独角兽企业重金招聘Python工程师标准>>> 在使用FusionCharts的时候,用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值.图表将根据父容器元素自动调 ...
FusionCharts參数中文说明
FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关參数中文说明例如以下. 功能特性 animation 是否动画显示数据,默觉得 1( ...
Fusioncharts图表组件在宿舍评分统计中的应用
上篇blog说了要展示下Fusioncharts在系统中的使用,现在就分享下自己在这块的应用. 首先向大家展示下这个效果是怎样的. 鼠标点击相关数据行,弹出隐藏DIV. 前台JSP需要文件: Fusi ...
FusionCharts参数的详细说明和功能特性
功能特性animation 是否动画显示数据,默认为1(True) showNames 是否显示横向坐标轴(x轴)标签名称 ...

FusionCharts使用

FusionCharts使用相关推荐

最新文章

热门文章