[Chart:Line&Spline]??????

2014-02-18 17:06:29by ???

折线图和样条线图的个性化节点

说明

这篇文章介绍的是如何自定义节点。

思考

如下图是一副月平均温度的图表。和默认图表不同的在于:

  1. 节点的大小

  2. 节点的边框

  3. 节点可用图标代替

  4. 将type="spline"属性改成line再试试效果

代码

function formatter1(){
    return this.value +'°';
}
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record london="3.9" period="Jan" tokyo="7.0"/>
            <a:record london="4.2" period="Feb" tokyo="6.9"/>
            <a:record london="5.7" period="Mar" tokyo="9.5"/>
            <a:record london="8.5" period="Apr" tokyo="14.5"/>
            <a:record london="11.9" period="May" tokyo="18.2"/>
            <a:record london="15.2" period="Jun" tokyo="21.5"/>
            <a:record london="17.0" period="Jul" tokyo="25.2"/>
            <a:record london="16.6" period="Aug" tokyo="26.5"/>
            <a:record london="14.2" period="Sep" tokyo="23.3"/>
            <a:record london="10.3" period="Oct" tokyo="18.3"/>
            <a:record london="6.6" period="Nov" tokyo="13.9"/>
            <a:record london="4.8" period="Dec" tokyo="9.6"/>
        </a:datas>
        <a:fields>
            <a:field name="period" prompt="月"/>
            <a:field name="london" datatype="float" prompt="伦敦"/>
            <a:field name="tokyo" datatype="float" prompt="东京"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>              
<a:chart bindTarget="ds" type="spline">
    <a:title text="月平均温度"/>
    <a:subtitle text="摘自:WorldClimate.com"/>
    <a:xAxis>
        <a:xAxi name="period"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="tokyo,london">
            <a:title text="温度"/>
            <a:labels formatter="formatter1"/>
        </a:yAxi>
    </a:yAxis>
    <a:tooltip crosshairs="true" shared="true"/>
    <a:plotOptions>
        <a:spline>
            <a:marker lineColor="#666666" lineWidth="2" radius="4"/>
        </a:spline>
    </a:plotOptions>
    <a:seriesList>
        <a:seriesItem name="tokyo">
        	<a:seriesDatas>
            	<a:seriesData dataIndex="7">
            		<a:marker symbol="url(${/request/@context_path}/images/sun.png)"></a:marker>
            	</a:seriesData>
        	</a:seriesDatas>
        </a:seriesItem>
        <a:seriesItem name="london">
        	<a:seriesDatas>
            	<a:seriesData dataIndex="0">
            		<a:marker symbol="url(${/request/@context_path}/images/snow.png)"></a:marker>
            	</a:seriesData>
        	</a:seriesDatas>
        </a:seriesItem>
    </a:seriesList>
</a:chart>

注释

  1. a:seriesList代码段的解释是:分别对名为tokyo的数据列中的第8个数据和名为london的数据列中的第1个数据作修饰。

  2. 节点a:marker是个性化节点的关键,在a:plotOptions下的a:marker是对整体节点的一个修改,而对于个别节点修改就要用到a:seriesList。

Demo
  1. ??????
Attachments
  1. ??????.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论