玩转FusionCharts:Y轴数字形式(如去掉K)

合集下载

Fusioncharts属性大全

Fusioncharts属性大全

边框和背景是否显示边框,1显示,0不显示。

2D showBorder图默认显示,3D图默认不显示。

borderColor 边框颜色,填写形式#000000 borderThickness 边框厚度borderAlpha 边框透明度,0-100bgColor 背景颜色bgAlpha 背景透明度背景颜色比例,加起来为100,格式bgRatio60,40bgImage 引用外部图片作为背景bgImageAlpha 背景图片透明度bgImageVAlign 背景图片垂直位置top middle bottom bgImageHAlign 背景图片竖直位置top middle bottombgImageScale 背景图片缩放0-300背景图片显示模式stretch, tile, fit, fill, bgImageDisplayModecenter and none.画布canvasBgColor 画布背景颜色,格式#000000 canvasBgAlpha 画布背景透明度,0-100显示画布边框,1显示,0不显示,默showCanvasBorder认显示canvasBorderColor 画布边框颜色canvasBorderThickness 画布边框厚度0-5 canvasBorderAlpha 画布边框透明度canvasBgColor 画布背景颜色,canvasBgAlpha 画布背景透明度,canvasBgRatio 画布背景比例, canvasBgAngle 画布背景角度0-360, canvasBaseColor 3D画布基座背景,针对3D图showCanvasBg 显示画布背景showCanvasBase 显示画布基座canvasBaseDepth 画布基座深度canvasBgDepth 画布背景深度标题和坐标轴caption 标题subCaption 子标题captionFont 标题字体captionFontColor 标题字体颜色captionFontSize 标题字体大小0-72captionFontBold 标题字体权重1加粗,0正常subCaptionFont 子标题字体subCaptionFontColor 子标题字体颜色subCaptionFontSize 子标题字体大小0-72subCaptionFontBold 子标题字体权重1加粗,0正常captionAlignment 标题位置left, center (default), right.captionOnTop 标题在顶部,1在,0不在标题与画布排列1画布区域,0图表区alignCaptionWithCanvas域captionHorizontalPadding 标题水平间距xAxisName X轴名yAxisName Y轴名xAxisNameFont /yAxisNameFont X/Y轴字体xAxisNameFontColorX/Y轴名字体颜色/yAxisNameFontColorxAxisNameFontSizeX/Y轴名字体大小/yAxisNameFontSizexAxisNameFontBold/yAxisNameFontX/Y轴名字体加粗1加粗。

取消matplotlib纵坐标的科学计数法

取消matplotlib纵坐标的科学计数法

取消matplotlib纵坐标的科学计数法取消matplotlib纵坐标的科学计数法概述:在数据可视化中,matplotlib 是一个常用的 Python 库,它提供了丰富的绘图功能。

然而,当绘制大数值或小数值时,matplotlib 默认使用科学计数法来表示纵坐标轴上的数值。

虽然科学计数法在一些情况下很有用,但有时我们更希望将坐标轴上的数值表示为常规的小数或整数形式。

在本篇文章中,我们将讨论如何取消 matplotlib 纵坐标的科学计数法,并解释其用法和原理。

1. 科学计数法的问题当数据集中包含非常大的数值或非常小的数值时,matplotlib 默认会使用科学计数法来表示纵坐标轴上的数值。

但在某些情况下,科学计数法可能不太直观,而且可能会导致数值的可读性下降。

取消科学计数法有助于更清晰地表达数据。

2. 取消科学计数法的方法取消 matplotlib 纵坐标的科学计数法有多种方法,下面介绍两种常用的方法。

方法一:使用 plt.ticklabel_format() 函数plt.ticklabel_format() 函数是 matplotlib 中用于设置刻度标签格式的函数。

通过将格式化参数设置为 'plain',我们可以取消纵坐标轴上的科学计数法,并以常规的小数或整数形式显示数值。

```pythonimport matplotlib.pyplot as pltplt.plot(x, y)plt.ticklabel_format(style='plain', axis='y') # 取消纵坐标科学计数法plt.show()```方法二:使用 plt.gca() 和 plt.gcf() 函数plt.gca() 函数返回当前的坐标轴实例,而 plt.gcf() 函数返回当前的Figure 实例。

我们可以使用这两个函数的方法来取消纵坐标轴上的科学计数法。

```pythonimport matplotlib.pyplot as pltplt.plot(x, y)plt.gca().yaxis.get_major_formatter().set_scientific(False) # 取消纵坐标科学计数法plt.show()```3. 示例和应用场景以下是一个示例,展示了取消 matplotlib 纵坐标科学计数法的实际应用。

echarts y轴axislabel formatter 函数

echarts y轴axislabel formatter 函数

echarts y轴axislabel formatter 函数"echarts y轴axislabel formatter 函数"是一个关于数据可视化工具ECharts中的y轴坐标轴标签格式化函数的主题。

本文将详细解释这个函数的作用和使用方法,并提供实际应用场景和示例,供读者理解和运用。

首先,让我们了解一下ECharts是什么。

ECharts是百度开发的一套基于JavaScript的开源数据可视化库,它提供了丰富的图表类型和交互功能,能够帮助用户轻松地创建各种精美的图表。

作为一个功能强大的数据可视化工具,ECharts在各类数据分析和报告中得到了广泛的应用。

在ECharts中,y轴(纵坐标轴)是一个重要的部分,它用于展示数据的大小、趋势和比较。

y轴的标签通常用于标识每个坐标点的值,以便用户更好地理解数据。

而通过使用“axislabel formatter”函数,我们可以对y轴的标签进行自定义格式化,使其更直观和易于理解。

具体来说,y轴的标签格式化函数可以通过一定的规则和逻辑对标签的数值进行处理和转换,以满足用户的需求。

这个函数接受一个参数“value”,表示标签的初始数值,然后返回一个字符串作为最终显示的标签内容。

为了更好地理解这个函数,我们可以结合一个实际的应用场景进行说明。

假设我们正在分析某个电商平台上不同商品的销售数据,并希望用折线图展示每个商品的销售额变化趋势。

在这个场景中,y轴的标签表示销售额的数值,我们可以通过“axislabel formatter”函数对其进行格式化,使其更易读。

一个简单的示例是将标签的数值转换为以“万元”为单位的形式显示。

我们可以通过以下代码来实现这个功能:javascriptyAxis: {type: 'value',axisLabel: {formatter: function (value) {return (value / 10000) + ' 万元';}}}在这段代码中,我们在y轴的配置中设置了“axislabel formatter”函数,并在函数内部对标签的数值进行了转换和格式化。

mplfinance y轴格式

mplfinance y轴格式

mplfinance y轴格式mplfinance是一个用于可视化金融数据的Python库。

它提供了一系列函数和方法,可以帮助我们创建各种类型的图表,包括K线图、柱状图、折线图等。

在mplfinance中,我们可以使用y轴格式来定制我们的图表,以便更好地展示金融数据。

本文将详细介绍如何使用mplfinance设置y 轴格式。

第一步是安装mplfinance库。

在使用mplfinance之前,我们需要先将它安装在我们的Python环境中。

可以使用pip命令来安装mplfinance,如下所示:pip install mplfinance安装完成后,我们可以导入mplfinance库,并开始使用它来可视化金融数据。

接下来,我们需要加载金融数据并创建一个基本的图表。

首先,我们需要从一个数据源中获取金融数据。

mplfinance支持从多种数据源加载数据,包括CSV文件、Pandas DataFrame、Quandl等。

在这里,我们以CSV 文件为例加载数据,假设我们的数据文件名为"stock_data.csv"。

我们可以使用Pandas库中的read_csv函数来加载数据,代码如下:pythonimport pandas as pddata = pd.read_csv("stock_data.csv", index_col=0,parse_dates=True)这里的"index_col=0"表示使用第一列作为数据的索引列,"parse_dates=True"表示将索引列解析为日期类型。

加载数据后,我们可以查看数据的前几行,以确保数据加载正确:pythonprint(data.head())数据加载完毕后,我们可以开始创建图表。

使用mplfinance创建图表的第一步是定义图表的样式。

我们可以创建一个样式字典,并将要设置的样式和对应的值添加到字典中。

echarty轴单位

echarty轴单位

echarty轴单位
ECharts是一款功能强大的JavaScript图表库,用于帮助开发者开发交互式的统计图表和可视化展示。

ECharts支持许多不同类型的图表,如折线图、柱状图、饼图、散点图等,它还提供了一些附加功能,如时间轴、缩放和标签列表,并具备非常丰富的配置项,使用它可以创建出漂亮的图表。

ECharts的轴单位是图表的一部分,它可以控制图表中的各种细节,例如轴的位置、标签的显示方式、坐标轴的显示方式等。

单位的设置可以帮助用户定义图表的格式,以及说明每个轴上的数据点,使整个图表更有吸引力。

ECharts中的轴单位可以为像素(px)、千分比(%)和绝对大小(number)这样的值类型,这些值类型可以用于以不同方式绘制轴例如,您可以使用px单位为X轴设置20px,而在Y轴上设置为50px。

这样,您就可以更精确地控制轴的位置,使统计图表更加美观有吸引力。

外,您还可以使用number单位将坐标轴的刻度设置为一定的数字,例如使用40、50、60这样的数字,这样可以更多地让数据点和轴有联系。

您还可以使用%单位设置X轴和Y轴的位置,这些位置的值将会保持不变,即便您调整了图表的尺寸或者屏幕大小,它们也不会变化。

ECharts的轴单位是一个重要的功能,它们可以让您更加精确地控制画布和图表中各个细节,从而让图表更加有吸引力,更具有说服力。

此外,您可以通过ECharts的轴单位来确保统计图表的布局和尺
寸在不同的屏幕和平台上保持一致,从而让用户更容易理解数据。

总之,ECharts轴单位是一个非常有用的功能,可以帮助开发者创建出美观、说服力强的图表,以更好地表达他们的想法,它也可以帮助用户更容易地理解统计数据。

FusionCharts X轴显示方式

FusionCharts X轴显示方式

Handling long x-axis labelsUsing rotated and slanted mode∙Using staggered mode and setting stagged lines∙Showing every n-th label∙Displaying short label on axis and showing full name as tool tip Let's see each of them one by one.1)Wrap Mode(换行模式)<chart labelDisplay='WRAP'>2)Rotating and Slanting Labels(旋转模式)<chart numberPrefix='$' labelDisplay='ROTATE'><set label='Jan 2006' value='434' /><set label='Feb 2006' value='376' /><set label='Mar 2006' value='343' /><set label='Apr 2006' value='234' /><set label='May 2006' value='356' /></chart>3)slant the labels at 45 degree(旋转且倾斜45度)<chart labelDisplay='Rotate' slantLabels='1' ..>4)Staggering labels on multiple lines(交错模式)<chart labelDisplay='Stagger' ..>.5)多行交错模式<chart labelDisplay='Stagger' staggerLines='n' ..>6)Showing every n-th label(跳跃模式)<chart numberPrefix='$' labelStep='4'showValues='0'> <set label='Jan 2006' value='434' /><set label='Feb 2006' value='376' /><set label='Mar 2006' value='343' /><set label='Apr 2006' value='234' /><set label='May 2006' value='356' /><set label='Jun 2006' value='183' /><set label='Jul 2006' value='365' /><set label='Aug 2006' value='357' /><set label='Sep 2006' value='375' /><set label='Oct 2006' value='345' /><set label='Nov 2006' value='655' /><set label='Dec 2006' value='435' /><set label='Jan 2007' value='586' /></chart>7)Displaying short label on axis and showing full name as tool tip<chart numberPrefix='$' rotateValues='1'><set label='J' toolText='January' value='434' /><set label='F' toolText='February' value='376' /><set label='M' toolText='March' value='343' /><set label='A' toolText='April' value='234' /><set label='M' toolText='May' value='356' /><set label='J' toolText='June' value='183' /><set label='J' toolText='July' value='365' /><set label='A' toolText='August' value='357' /><set label='S' toolText='September' value='375' /><set label='O' toolText='October' value='345' /><set label='N' toolText='November' value='655' /><set label='D' toolText='December' value='435' /></chart>。

ECharts的x轴和y轴均使用数值类型

ECharts的x轴和y轴均使⽤数值类型今天有个需求,就是需要ECharts的x轴和y轴都要使⽤数值类型,即xAxis.type和yAxis.type均为value,然后我按照我以为的⽅式修改了下,发现图崩了发现问题:然后我打开了ECharts的做测试,⾸先写了⾃认为对的代码option = {xAxis: {type: 'value',data: [1, 2, 3, 4, 5, 6, 7],name: 'x轴'},yAxis: {type: 'value',name: 'y轴'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};然后实际的图是有问题的,如下图,可以发现柱状图的左上⾓那个点的x和y的值是相等的,从左往右分别是70,80,110,120,130,150,200(没错,就是series⾥的那⼀组数据)解决问题:1、⾸先打开ECharts的2、我看到xAxis.data[i]的⽂档内容,它⾥⾯提到xAxis的data是类⽬数据。

那这也就意味着,当type='value'时,data⾥⾯存放的数据是⽆效的类⽬数据,在类⽬轴(type: 'category')中有效。

如果没有设置 type,但是设置了axis.data,则认为type是'category'。

如果设置了 type 是'category',但没有设置axis.data,则axis.data的内容会⾃动从 series.data 中获取,这会⽐较⽅便。

不过注意,axis.data指明的是'category'轴的取值范围。

如果不指定⽽是从 series.data 中获取,那么只能获取到 series.data 中出现的值。

qcharts中的removeaxis用法

qcharts中的removeAxis用法简介q c ha rt s是一款基于V ue的数据可视化解决方案,提供了丰富的图表组件和灵活的配置选项。

其中的r em ov eA x is方法是一个非常有用的功能,它允许我们在绘制图表时移除指定的坐标轴,从而实现更加个性化的数据展示效果。

remov eAxis方法的基本用法在q ch ar ts中,我们可以通过c ha rt对象的r em ov eA xi s方法来移除坐标轴。

该方法接受一个参数,即要移除的坐标轴的标识符。

下面是使用r em ov eA xi s方法的基本用法示例:```j av as cr ip tc h ar t.re mo ve Ax is('x')```在这个示例中,我们使用re mo ve Ax is方法移除了x轴。

移除单个坐标轴r e mo ve Ax is方法支持移除单个坐标轴,可以通过指定坐标轴的标识符来实现。

下面是一个示例:```j av as cr ip t//移除x轴c h ar t.re mo ve Ax is('x')//移除y轴c h ar t.re mo ve Ax is('y')```在这个示例中,我们分别移除了x轴和y轴。

移除多个坐标轴r e mo ve Ax is方法还支持移除多个坐标轴,可以通过传入一个数组来指定要移除的坐标轴标识符。

下面是一个示例:```j av as cr ip t//移除x轴和y轴c h ar t.re mo ve Ax is(['x','y'])//移除左侧和右侧的y轴c h ar t.re mo ve Ax is(['l ef tY','r ig htY'])```在这个示例中,我们分别移除了x轴和y轴,并且还展示了如何同时移除多个坐标轴。

注意事项在使用r em ov eA xi s方法时,需要注意一些事项:1.re mo ve Ax is方法只能用于在绘制图表之前移除坐标轴,一旦图表绘制完成,再使用该方法将不起效果。

怎么去除图里的趋势线

怎么去除图里的趋势线趋势线是数据分析中常用的一种手段,它通常用于显示数据中的趋势和变化趋势。

趋势线是一条直线或曲线,其放置在数据点的中心,以最佳方式表示数据点之间的关系和趋势。

有时,趋势线可能会影响到数据分析的精度和准确性,因此我们需要学习如何去除趋势线。

解决方法:在Excel中,我们可以使用以下几种方法去除趋势线:方法1:清空数据标签首先,打开Excel工作簿,选择包含趋势线的数据区域,接着在“图表工具”选项卡中的“布局”选项卡中找到“数据标签”组。

在这个组中,点击“数据标签”的小箭头,选择“无”,然后趋势线上的数据标签就会被清空了。

此时,由于Excel趋势线默认会显示数据标签,因此清空数据标签后,趋势线就会被去除了。

方法2:删除趋势线另一种方法是直接删除趋势线。

方法非常简单,只需右键单击趋势线,出现菜单后选择“删除趋势线”即可。

方法3:隐藏趋势线隐藏趋势线是一种不删除趋势线,但同时不显示也不生成趋势线的方法。

后续如果需要重新显示趋势线,可逆操作即可。

步骤如下:右键单击趋势线,然后在菜单中选择“格式趋势线”,或打开“格式数据系列”窗格。

然后,在“线条颜色”标签页中,调整设置,将“线条颜色”设置为白色或者其它颜色,同时调整“线条样式”属性,如将“线条宽度”调整为0,以此来隐藏趋势线的显示。

方法4:修改趋势线格式(修改线型)我们也可以修改趋势线的格式来去除其影响。

修改趋势线的格式,可以包括修改线型、颜色、宽度等。

具体操作为:在Excel工作簿中,选择包含趋势线的数据区域,右键单击趋势线,然后选择“格式趋势线”或者打开“格式数据系列”窗格。

接下来,可以在“线条样式”标签页中,调整趋势线的线型、颜色、宽度等属性,或者选中“无线条”来去除趋势线的显示。

需要注意的是,如果删除趋势线或者修改趋势线的格式后,后续数据的更新或者重新绘图会导致趋势线重新生成,因此需要记住对趋势线进行去除操作。

echarts问题之——多y轴显示问题

多y轴显示问题,如:1.echarts版本为echarts.5.3.32.三个坐标轴等分数量不相同,分别添加alignTicks: true,添加前添加后3.坐标轴线的位置和偏移量设置offset: 60,position: "right",添加前:添加后:4.series下添加yAxisIndex: 0/1/2,不同y轴对应不同指标数据添加前:添加后:完整js代码如下var images = ["image://../images/rect_1.png","image://../images/rect_2.png","image://../images/rect_3.png","image://../images/rect_4.png",];var myChart =echarts.init(document.getElementById("chart1"));var option;var legend_con = [];var legendArr1 = [];var xdata = [];var datavalue = [];var data = [];var yUnit = null;//动态样式设置//var colorArray = ["#2250B8"]; //单条数据的颜色设置var colorArray = ["#00ECFD", "#2250B8", "#8777F4"]; //设置不同柱形的颜色var style1 = "5px"; //设置柱形的占比//动态设置显示的柱形的个数var ReturnValue ='{"Title":"金融分析数据","Unit":"","XUnit":"","YUnit":"(℃)","YUnitR":"(蒸发量)","YUnitR1":"(降水量)","Names":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"Nums":[{"Num1":{"Name":"蒸发量","Datas":["110","240","130","250","150","240","230","250","150","140","230","250"]}},{"Num1":{"Name":"降水量","Datas":["120","44","33","100","44","44","33","85","5 4","48","33","88"]}},{"Num1":{"Name":"平均温度","Datas":["11","24","13","25","15","24","23","25","15" ,"14","23","25"]}}]}';window.onload = function () {if (dataFlag) {pletedata();} else {updatedata(stringToobj(ReturnValue));}};function stringToobj(Input) {return eval("(" + Input + ")");}//获取最大值function calMax(array) {return Math.max.apply(Math, array);}//获取最小值function calMin(array) {return Math.min.apply(Math, array);}function updatedata(input) {if (dataFlag) {var inputObj = stringToobj(input);} else {var inputObj = stringToobj(ReturnValue); }data = [];xdata = [];legend_con = [];//获取y轴单位yUnit = inputObj["YUnit"];//获取x轴坐标var xdatas = inputObj["Names"];for (var i = 0; i < xdatas.length; i++) {xdata.push(inputObj["Names"][i]);}//获取数据值和legendvar yJsonObj = inputObj["Nums"];for (var key in yJsonObj) {var Names = yJsonObj[key];console.log(Names);legend_con.push(Names);var img = {name:"",icon:"",textStyle: {color:colorArray[key],},};img.icon = images[key]; = yJsonObj[key];legendArr1.push(img);var ydata = yJsonObj[key].Num1.Datas;data.push(ydata);}var style_lengend = {data:legendArr1,orient:"horizontal",x:"5%", //可设定图例在左、右、居中// y: "left", //可设定图例在上、下、居中align:"left",top:"0%",selectedMode:false,icon:"rect", //设置显示为矩形textStyle: {//图例文字的样式fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,fontFamily:"SourceHanSansCN-Regular", },itemWidth:10, //设置图表的大小itemHeight:5,itemGap:35, //图例之间的距离};// var data1 = data[0];// var data2 = data[1];console.log(data[0]);console.log(data[1]);console.log(data[2]);// //获取最大最小值// var Min1 = Math.ceil(calMin(data1));// var Max1 = Math.ceil(calMax(data1));// var Min2 = Math.ceil(calMin(data2));// var Max2 = Math.ceil(calMax(data2));// for (var i = 0; i < 100; i++) {// if (Max1 % 50 != 0 || Max1 % 10 != 0 || Max1 % 2 != 0) {// Max1 = Max1 + 1;// } else {// break;// }// if (Max2 % 50 != 0 || Max2 % 10 != 0 || Max2 % 2 != 0) {// Max2 = Max2 + 1;// } else {// break;// }// }option = {tooltip: {trigger:"axis",axisPointer: {// 坐标轴指示器,坐标轴触发有效type:"shadow", // 默认为直线,可选为:'line' | 'shadow'},formatter:function (params) {let str = "";params.forEach((item, i) => {console.log(item);// console.log(i);// console.log(barcolor[i])if (ponentSubType == "bar" ||ponentSubType == "line") {str +='<spanstyle="display:inline-block;margin-right:5px;border-rad ius:50%;width:10px;height:10px;left:5px;background-colo r:' +colorArray[i] +'"></span>' +item.seriesName +" : " +item.value +"<br />";} else {str += "";}});return str;},},legend:style_lengend, //图例的设置grid: {left:"5%",right:"15%",bottom:"10%",top:"85px",containLabel:true,},// ["#00ECFD", "#2250B8", "#8777F4"]xAxis: {type:"category",data:xdata,axisTick: {//去除刻度线show:false,},splitLine: {//去除刻度线show:false,},axisLine: {//轴线样式lineStyle: {color:"#666cb4",width:1, //这里是为了突出显示加上的 },},axisLabel: {show:true,interval:0,textStyle: {color:"#407CAF", //更改坐标轴文字颜色fontSize:14,fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,},margin:15,},},yAxis: [{type:"value",alignTicks:true,name:yUnit,splitNumber:4,nameTextStyle: {//y轴上方单位的颜色color:"#8777F4",fontFamily:"SourceHanSansCN-Regular",fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,padding: [0, 0, 10, -35], //上右下左设置y轴单位的位置},axisTick: {//去除刻度线show:false,},splitLine: {//设置网格颜色show:true,lineStyle: {color: ["#3e4172"],width:1,type:"dashed",},},axisLine: {lineStyle: {color:"#666cb4",width:2, //这里是为了突出显示加上的},},axisLabel: {show:true,textStyle: {color:"#407CAF", //更改坐标轴文字颜色fontSize:14,fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,},},mininterval:1,// min: 0,// max: Max1,// splitNumber: 5,// interval: (Max1 - 0) / 5,},{type:"value",alignTicks:true,name:inputObj.YUnitR,position:"right",splitNumber:4,nameTextStyle: {//y轴上方单位的颜色color:"#00ECFD",fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,padding: [0, 0, 10, 30], //上右下左设置y轴单位的位置},axisTick: {//去除刻度线show:false,},splitLine: {//设置网格颜色show:false,lineStyle: {color: ["#3e4172"],width:3,type:"dashed",},},axisLine: {show:true,lineStyle: {color:"#666cb4",width:2, //这里是为了突出显示加上的 },},axisLabel: {show:true,textStyle: {color:"#407CAF", //更改坐标轴文字颜色fontSize:14,fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,},},mininterval:1,},{type:"value",name:inputObj.YUnitR1,alignTicks:true,offset:60,position:"right",splitNumber:4,nameTextStyle: {//y轴上方单位的颜色color:"#2250B8",fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,padding: [0, 0, 10, 30], //上右下左设置y轴单位的位置},axisTick: {//去除刻度线show:false,},splitLine: {//设置网格颜色show:false,lineStyle: {color: ["#3e4172"],width:3,type:"dashed",},},axisLine: {// onZero: false,show:true,lineStyle: {color:"#2250B8",width:2, //这里是为了突出显示加上的},},axisLabel: {// onZero: false,show:true,textStyle: {color:"#407CAF", //更改坐标轴文字颜色fontSize:14,fontFamily:"SourceHanSansCN-Regular",fontSize:14,fontWeight:"normal",fontStretch:"normal",lineHeight:19,letterSpacing:0,},},mininterval:1,// margin: [0, 0, 0, -20],},],series: [{name:"蒸发量",type:"bar",yAxisIndex:1,stack: ["蒸发量"],barWidth:"10", //设置柱形的宽度barGap:0.2,// yAxisIndex: "0", //设置自适应左轴的数据data:data[0],itemStyle: {normal: {color:newecharts.graphic.LinearGradient(0, 1, 0, 0, [{offset:0,color:"rgba(0,255,255,0.29)", },{offset:1,color:"rgba(0,255,255,0.83)", },]),},}, //设置柱形渐变*/animationDelay:function (idx) {// 越往后的数据延迟越大return idx * 200;},label: {normal: {show:true,position:"top",width:10,height:3,offset: [0, 5],backgroundColor:"#00ecff",color:"transparent",fontSize:3,},},},{name:"降水量",type:"bar",stack: ["降水量"],barWidth:"10", //设置柱形的宽度yAxisIndex:"2", //设置自适应右轴的数据barGap:0.2,data:data[1],itemStyle: {normal: {color:newecharts.graphic.LinearGradient(0, 1, 0, 0, [{offset:0,color:"rgba(34,81,183,0.29)", },{offset:1,color:"rgba(34,81,183,0.83)", },]),},}, //设置柱形渐变*/label: {normal: {show:true,position:"top",width:10,height:3,offset: [0, 5],backgroundColor:"#2251B7",color:"transparent",fontSize:3,},},animationDelay:function (idx) {// 越往后的数据延迟越大return idx * 200;},},{name:"平均温度",type:"line",yAxisIndex:0,barWidth:"10", //设置柱形的宽度barGap:0.2,data:data[2],itemStyle: {normal: {color:newecharts.graphic.LinearGradient(0, 1, 0, 0, [ {offset:0,color:"#8777F4",},{offset:1,color:"#8777F4",},]),},}, //设置柱形渐变*/animationDelay:function (idx) {// 越往后的数据延迟越大return idx * 200;},},],animation:true,animationDuration:2000, };resetcharts();}function resetcharts() {myChart.clear();myChart.setOption(option); }。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

玩转FusionCharts:Y轴数字形
式(如去掉K)

2

———————————————————————————————— 作者:
———————————————————————————————— 日期:
3 / 4

玩转FusionCharts:Y轴数字形式(如去掉K)
如果运行FusionCharts带的例子,你会发现FusionCharts表中的数字(通常是
Y轴)会带上’k’,也就是如20000,会变成20k,如下图所示:

很 显然,你可能并不需要这个k,去掉的方法也很简单,在附带例子对应的xml
文件中,设置chart的属性formatNumberScale=’0′即可 去除掉这个’k’了,
当然,如果你想保留这个k,那么可以设置formatNumberScale=’1′。去掉后
的图片如下所示:
4 / 4

如果你想给Y轴上的数字前后加上不同的后缀,那么你可以用chart以下两个
属性:

numberPrefix和numberSuffix’。
numberPrefix是加上前缀,numberSuffix是加上后缀,试试看,设置:
numberPrefix = ‘a’
numberSuffix = ‘b’
设置后,将在数字两旁分别加上a和b,变成如a40,000b

相关文档
最新文档