FusionCharts使用

于 2021-01-20 20:20:54 发布
阅读量141 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42145351/article/details/112909479
版权

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


<head>
    <!-- Step 1 - Include the fusioncharts core library -->
    <script type="text/javascript" src="fusioncharts.js"></script>
    <!-- Step 2 - Include the fusion theme -->
    <script type="text/javascript" src="themes/fusioncharts.theme.carbon.js"></script>
</head>
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="fusioncharts.js"></script>
<!-- Include fusion theme -->
<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",

 

qq_392622734
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FusionCharts使用详解+实例+图解+Demo
songweijiufei的专栏
06-11 1401
FusionCharts使用详解+实例+图解+Demo
FusionCharts背景透明
felcon的专栏
09-01 2636
版本：3.11 根据Fusioncharts的官方文档，设置背景透明只需要几个参数 “bgAlpha”:”0” “canvasBgAlpha”:”0” 其中取值从0-100，0代表完全透明，100完全不透明。 background和canvas的区别如下图： 可见background覆盖整个图表，而canvas只包括数据绘图区域。但是按照这样操作之后，不会显示背景色，但是绘图区域
一起学习fusioncharts 三
leihope_的博客
04-07 259
认识完，部署完，那我们就开始要实践了。 先做一个这样的柱状图。 1.创建一个HTML文件 2.然后在HTML中引用fusioncharts的JS文件 3.创建一个DIV作为图表的容器，并去一个合理的ID 4.最后一步比较难的一点，创建一个图表类型的实例作为column2d，设置宽度和高度（以像素或％为单位），最后以字符串或URL指定图表的JSON数据 按步骤给大家看一下代码。
最新版FusionCharts2D饼图
牛栏山矿泉水
06-24 288
1、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最新版FusionCharts2D饼图&lt;/title&gt; &lt;script src="../js/jquery-3.0.0.js"&gt
FusionCharts的使用方法
weixin_33912638的博客
04-12 205
今天统计价格变化规律的时候找到的一个很好的文档，很详细 一、简介 Ø FusionCharts 是InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于Flash 技术的产品，都非常的漂亮。 Ø FusionCharts Free 则是FusionCharts 提供的一个免费版本，虽然免费，功能依然...
Carbon —— 代码分享利器
涤生的博客
05-04 6756
Carbon是一个可以把你的代码转成一张精美海报的工具。Carbon 可以轻松将源代码创建成简洁美观的图像分享出去。
FusionCharts 使用实例
02-23
标题"FusionCharts使用实例"指的是使用FusionCharts这个JavaScript图表库来创建动态、交互式的图表。FusionCharts是一个广泛使用的工具，它允许开发者通过简单的API和丰富的图表类型将复杂的数据可视化，适用于各种...
FusionCharts使用手册
01-26
**FusionCharts使用手册** FusionCharts是一款强大的数据可视化工具，尤其在Web应用程序中广泛使用。它能够将结构化数据转换为生动的交互式图表，帮助用户更好地理解和解析复杂的数据。以下是对FusionCharts主要...
fusionCharts使用文档
10-23
这个"fusionCharts使用文档"包含了一系列关于如何有效利用FusionCharts进行数据展示的知识点。以下是对这些知识点的详细说明： 1. **安装与引入**：FusionCharts首先需要在项目中安装并引入。你可以通过下载官方...
carbon:一个可扩展的轻量级、独立的、模块依赖注入库
06-29
碳 一个可扩展的轻量级、独立的、模块依赖注入库。 为什么 Carbon 的创建是为了提供一种创建模块的方法，在单独的文件中使用它们，完全可测试，并且完全不受开发人员的影响。 当前可用的框架（和一些库）带有自己的模板引擎或操作 HTML 的方法，但它们并不总是正确的。 Carbon 为依赖注入铺平了道路，保持可测试性，但允许开发人员选择最适合这个特定项目的工具。 如果作业只是 DI 并且允许跨文件进行 DI，Carbon 是适合该作业的工具。 样品 创建模块 carbon . module ( 'Module1' , function ( ) { return { count : 0 , add : function ( num ) { this . count += num ; } } ; } )
carbonjs
03-16
carbonjs
carbon：可以把代码片段生成漂亮的图片，从此告别难看的代码截图.zip
09-24
carbon：可以把代码片段生成漂亮的图片，从此告别难看的代码截图.zip,创建并共享源代码的美丽图像
carbonate:用于R的carbon.js
05-08
碳酸盐 “ 是创建源代码精美图像的最简单方法。” 该软件包使用R6 api与carbon.js进行交互，并直接从控制台Carbon映像创建。 如下图所示： 安装 # remotes::install_github('yonicd/carbonate') install.packages( ' carbonate ' ) 用法 初始化新的碳对象 library( carbonate ) 碳对象中的默认代码是从剪贴板中获取的。 x <- carbon $ new() 但是也可以内联定义。 代码可以是任意长度的字符对象。 x <- carbon $ new(readLines( ' DESCRIPTION ' )) 代码保存在对象中，可以随时更改。 x $ code # > [1] "Package: carbonate"
FushionChart一个酷炫的图表插件
edifiergl的专栏
11-21 2762
FushionChart是一个关于图表的js插件。它能够把很多简单的图表用很酷很炫的方式显示在html中。 它接受json,xml数据格式,我们只需要知道不同图表不同的数据格式就能够正确显示图表了。 它操作起来非常简单,下面我就来简单介绍一下它是如何使用的。以下使用的所有数据都是静态的json 格式的数据。要实现动态效果自己加上ajax将数据传过来就行了。
FusionCharts绘图插件详解
极客园地
09-03 1064
目前在做项目完成数据统计，需要将统计数据进行图形化分析。将数据做成各种图表，即柱状图和折线图，由此接触了FusionCharts绘图插件，经过查询资料和做Demo，将项目功能完成，特此总结以备将来查阅。 一、FusionCharts简介 FusionCharts是一个JavaScript图表库，可以使用JavaScript创建交互式图表，仪表，地图和仪表板。所支持的常用的图表，新版本的Fu...
fusioncharts如何运用
Eric的专栏
03-02 1165
fusioncharts是一个很使用的网页报表插件，通过它可以满足各种各样的表格需要而且样式也肯酷。 这里是fusioncharts的下载地址http://www.fusioncharts.com/download/。 接下来就看看它是如何完成一个图标的： 我用的是myeclipse所以就用的web项目做的，首先创建web项目。 然后创建fusioncharts文件夹把压缩
FusionCharts Suite XT统计图表使用笔记(2)--创建图表过程步骤
有范管理美学 | 公众号/头条号：有范管理美学
05-21 1735
FusionCharts Suite XT统计图表使用笔记(2)--创建图表过程步骤 Let us build our first chart using FusionCharts Suite XT! Throughout this documentation, we will create charts for a fictional supermarket, Harry’s Supe
Carbon插件 基本运用
qq_26740797的博客
09-18 1754
Carbon插件获取特定时间的方法 //设置特定时间 获取特定时间 Carbon::create(‘2012-09-04 12-59-59’); //获取当前时间 Carbon::now(); //获取当前时间搓 Carbon::now()-&amp;gt;timestamp //获取特定的时间的时间搓 Carbon::now()-&amp;gt;subday(-1)-&amp;gt;timestemp //获取当前前一...
Carbon类
qq_36663951的博客
01-13 888
Carbon类是从PHP DateTime类继承而来的。 第一步，设置本地化设置时区我们可以放在 app/Providers/AppServiceProvider.php 的 boot() 方法中添加下面的代码来设置全局本地化：public function boot() { // 设置本地化 \Carbon\Carbon::setLocale('zh'); } 如果不习惯用 \ 来调用
FusionCharts使用教程：从入门到精通
"FusionCharts使用文档" FusionCharts是一款强大的图表生成工具，广泛应用于数据分析和图形报表的制作。它能够创建各种类型的图表，包括单列图、多列图、混合图以及仪表图，以直观、美观的方式展示数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值