flex amcharts line demo2_amgraph graph title width-优快云博客

本文介绍了一个用于展示日雨量及水位变化趋势的图表应用实例。该图表使用AmCharts库实现，能够清晰地展示不同时间点的日雨量(mm)与水位(m)数据，帮助用户直观了解降雨量与水位之间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xmlns:chart="chart.*"				   xmlns:amcharts="http://www.amcharts.com/com_internal"
==========
[Bindable]
			private var chartData:ArrayCollection = new ArrayCollection([
				{stcd:"01-08 09:00",avg:"0.0",sw:12.31},
				{stcd:"01-08 10:00",avg:1.5,sw:12.71},
				{stcd:"01-08 11:00",avg:2.5,sw:13.31}]);
==========
<viewer:WidgetTemplate width="100%" height="100%">
		<s:BorderContainer x="0" y="0" left="2" top="2" right="2" width="100%" height="100%" id="bc1" borderAlpha="0" backgroundAlpha="0">
			
		
		<chart:SerialChart id="sqchart" x="0" y="0" width="100%" height="100%" categoryField="stcd"
						   color="#000000" columnSpacing="0" columnWidth="0.6"
						   dataProvider="{chartData}" plotAreaFillAlphas="1" startDuration="0.3"
						   plotAreaFillColors="[#d6ebf7,#ffffff,#d6ebf7]">
			<chart:graphs>
				<amcharts:AmGraph title="日雨量" valueField="avg" type="column" fillAlphas="1" 
								  fillColors="[#7EEAE3,#50BBF0,#2C90E3]"
								  lineAlpha="0"  balloonText="雨量: [[value]]mm" valueAxis="{rain}"/>
				<amcharts:AmGraph title="日雨量" valueField="sw" type="smoothedLine" lineColor="#FF7A82"
								  lineAlpha="1"  balloonText="水位: [[value]]m" lineThickness="2"/>
			</chart:graphs>
			<chart:balloon>
				<amcharts:AmBalloon borderThickness="2" borderAlpha="1" cornerRadius="3" fontSize="13"
									fontWeight="bold"/>
			</chart:balloon>
			<chart:valueAxes>
				<amcharts:ValueAxis gridAlpha="0.1"  axisColor="#0000ff" axisThickness="2" color="#0000ff"
									min="5" max="30"></amcharts:ValueAxis>
				<amcharts:ValueAxis gridAlpha="0"  axisColor="#000000" id="rain" position="right" reversed="true"
									min="0" max="32"></amcharts:ValueAxis>
			</chart:valueAxes>
			<chart:categoryAxis>
				<amcharts:CategoryAxis gridAlpha="0.1"  axisColor="#E0559C" title="时间" tickLength="0" titleTextColor="#4AABDB"
									   titleTextSize="14" startOnAxis="true"
									   axisThickness="2" color="#E0559C"></amcharts:CategoryAxis>
			</chart:categoryAxis>
			<chart:chartCursor>
				<amcharts:ChartCursor/>
			</chart:chartCursor>
		</chart:SerialChart>
		</s:BorderContainer>
	</viewer:WidgetTemplate>