首页 web前端 js教程 FusionCharts图表显示双Y轴双(多)曲线_javascript技巧

FusionCharts图表显示双Y轴双(多)曲线_javascript技巧

May 16, 2016 pm 05:48 PM
fusioncharts 图表

项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线,
找了一下,用MSCombiDY2D.swf可以实现,生成图如下:


两个图表的数据是一样的,设置有一此不同而己
对应的XML文本如下
复制代码 代码如下:































现在要将区域图表变为曲线只需将

改为

说明
parentYAxis='P'表示对应的为左边的Y轴
parentYAxis='S'表示对应的为右边的Y轴
renderAs表示形状,Area 为区域图表,Line为曲线图表
关于 参数设置
功能特性
animation 是否动画显示数据,默认为1(True)
showNames 是否显示横向坐标轴(x轴)标签名称
rotateNames 是否旋转显示标签,默认为0(False):横向显示
showValues 是否在图表显示对应的数据值,默认为1(True)
yAxisMinValue 指定纵轴(y轴)最小值,数字
yAxisMaxValue 指定纵轴(y轴)最小值,数字
showLimits 是否显示图表限值(y轴最大、最小值),默认为1(True)
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
图表和画布的样式
bgColor 图表背景色,6位16进制颜色值
canvasBgColor 画布背景色,6位16进制颜色值
canvasBgAlpha 画布透明度,[0-100]
canvasBorderColor 画布边框颜色,6位16进制颜色值
canvasBorderThickness 画布边框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否显示系列名,默认为1(True)
字体属性
baseFont 图表字体样式
baseFontSize 图表字体大小
baseFontColor 图表字体颜色,6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色,6位16进制颜色值
分区线和网格
numDivLines 画布内部水平分区线条数,数字
divLineColor 水平分区线颜色,6位16进制颜色值
divLineThickness 水平分区线厚度,[1-5]
divLineAlpha 水平分区线透明度,[0-100]
showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor 横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度,[0-100]
showDivLinues 是否显示Div行的值,默认??
numVDivLines 画布内部垂直分区线条数,数字
vDivLineColor 垂直分区线颜色,6位16进制颜色值
vDivLineThickness 垂直分区线厚度,[1-5]
vDivLineAlpha 垂直分区线透明度,[0-100]
showAlternateVGridColor 是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor 纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度,[0-100]
数字格式
numberPrefix 增加数字前缀
numberSuffix 增加数字后缀 % 为 '%'
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision 指定小数位的位数,[0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分区线的值小数位的位数,[0-10]
limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数,[0-10]
formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
decimalSeparator 指定小数分隔符,默认为'.'
thousandSeparator 指定千分位分隔符,默认为','
Tool-tip/Hover标题
showhovercap 是否显示悬停说明框,默认为1(True)
hoverCapBgColor 悬停说明框背景色,6位16进制颜色值
hoverCapBorderColor 悬停说明框边框颜色,6位16进制颜色值
hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness 折线的厚度
anchorRadius 折线节点半径,数字
anchorBgAlpha 折线节点透明度,[0-100]
anchorBgColor 折线节点填充颜色,6位16进制颜色值
anchorBorderColor 折线节点边框颜色,6位16进制颜色值
Set标签使用的参数
value 数据值
color 颜色
link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])
name 横向坐标轴标签名称
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Google Sheet中为图例添加标签 如何在Google Sheet中为图例添加标签 Feb 19, 2024 am 11:03 AM

本文将演示如何在GoogleSheet中为图例添加标签,这些标签侧重于单个事物,提供名称或标识。图例解释了事物的系统或组,为您提供相关的上下文信息。如何在GoogleSheet中为图例添加标签有时候,在使用图表时,我们想要让图表更易于理解。通过添加恰当的标签和图例,可以实现这一目的。接下来,我们将介绍如何在Google表格中为图例添加标签,让您的数据更加清晰明了。创建图表编辑图例标签的文本我们开始吧。1]创建图表要标记图例,首先,我们必须创建一个图表:首先,在GoogleSheets的列或行中输

如何使用PHP数组实现图表和统计图的生成和显示 如何使用PHP数组实现图表和统计图的生成和显示 Jul 15, 2023 pm 12:24 PM

如何使用PHP数组实现图表和统计图的生成和显示PHP是一种广泛使用的服务器端脚本语言,具有强大的数据处理和图形生成能力。在Web开发中,经常需要展示数据的图表和统计图,通过PHP数组,我们可以轻松实现这些功能。本文将介绍如何使用PHP数组生成和显示图表和统计图,并提供相关的代码示例。引入必要的库文件和样式表在开始之前,我们需要在PHP文件中引入一些必要的库文

Vue统计图表的线性、饼状图功能实现 Vue统计图表的线性、饼状图功能实现 Aug 19, 2023 pm 06:13 PM

Vue统计图表的线性、饼状图功能实现在数据分析和可视化领域,统计图表是一种非常常用的工具。Vue作为一种流行的JavaScript框架,提供了便捷的方法来实现各种功能,包括统计图表的展示和交互。本文将介绍如何使用Vue来实现线性和饼状图功能,并提供相应的代码示例。线性图功能实现线性图是一种用于展示数据趋势和变化的图表类型。在Vue中,我们可以使用一些优秀的第

Vue框架下,如何快速搭建统计图表系统 Vue框架下,如何快速搭建统计图表系统 Aug 21, 2023 pm 05:48 PM

Vue框架下,如何快速搭建统计图表系统在现代网页应用中,统计图表是必不可少的组成部分。Vue.js作为一款流行的前端框架,提供了很多便捷的工具和组件,能够帮助我们快速搭建统计图表系统。本文将介绍如何利用Vue框架以及一些插件来搭建一个简单的统计图表系统。首先,我们需要准备一个Vue.js的开发环境,包括安装Vue脚手架以及一些相关的插件。在命令行中执行以下命

Excel图表学习之如果让图表像网页一样动起来 Excel图表学习之如果让图表像网页一样动起来 Aug 16, 2022 am 10:30 AM

在之前的文章《Excel图表学习之通过案例,聊聊怎么绘制量筒式柱形图》中,我们了解了绘制量筒式柱形图的方法。而今天我们再分享一个Excel图表教程,聊一个让Excel图表像网页一样动起来的方法,只要输入关键字,表格数据和图表就会自动改变,特别是公司的数据需要分部门统计时,简直太方便啦!

word图表怎么插入 word图表怎么插入 Mar 20, 2024 pm 03:41 PM

有时为了是数据展示的更加直观,我们需要借助图表来展示,但一说到图表很多人认为只能在excel上操作,其实不然,word也是可以直接插入图表。那如何操作呢?一起看看就知道了。1.首先我们打开一个word文档。  2.接下来我们在“插入”菜单中,找到“图表”工具按钮并点击。  3.单击“图表”按钮,在里面选择一个适合的图表,这里我们随意选择一种图表类型,单击“确定”就可以了  4.选择好图表之后,系统会自动打开excel图表,而且里面已经录入好数据,我们只要更改一下数据即可。这里大家如果已经做好表格

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 Aug 27, 2023 am 11:51 AM

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能在网页开发中,图表是一种非常常见的数据展示方式。使用PHP和Vue.js可以轻松实现图表上的数据筛选和排序功能,使用户能够自定义查看图表上的数据,提高数据的可视化效果和用户体验。首先,我们需要准备一组数据供图表使用。假设我们有一个数据表格,包含姓名、年龄和成绩三列,数据如下:姓名年龄成绩张三1890李

fusioncharts.js的使用详解 fusioncharts.js的使用详解 Dec 08, 2023 pm 01:45 PM

fusioncharts.js提供了丰富的图表类型、数据可视化和交互功能,可以帮助开发人员在 Web 应用程序中创建高质量的图表和仪表。

See all articles