FusionCharts中文教程:自定义图表的双Y轴

阅读更多

本篇教程将从字体、背景、边框三个方面来教大家如何自定义FusionCharts双Y轴图表的主次轴标题属性。

< 立即下载体验FusionCharts>

1.配置主次Y轴名称的字体属性

多系列组合2D图表的主次Y轴名称字体设置为斜体效果图如下:

FusionCharts中文教程:自定义图表的双Y轴_第1张图片

设置双Y轴名称字体所需属性如下表:

属性名称 描述
pYAxisName (sYAxisName) 用于在多系列图表中设置主(次)Y轴的名称。
pYAxisNameFont (sYAxisNameFont) 设置主(次)Y轴的字体。
pYAxisNameFontColor (sYAxisNameFontColor) 设置主(次)Y轴名称的字体颜色。
pYAxisNameFontSize (sYAxisNameFontSize) 设置主(次)Y轴名称的字体大小。
pYAxisNameFontBold (sYAxisNameFontBold) 为1时将主(次)Y轴名称设置为加粗;为0时设置为正常。
pYAxisNameFontItalic (sYAxisNameFontItalic) 为1时将主(次)Y轴名称设置为斜体;为0时设置为正常。

上图的数据结构如下:
JSON:

{
    "chart": {
        "caption": "Revenues and Profits",
        "subCaption": "For last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "pYAxisNameFont": "Arial",
        "pYAxisNameFontSize": "12",
        "pYAxisNameFontColor": "#003366",
        "pYAxisNameFontBold": "1",
        "pYAxisNameFontItalic": "1",
        "pYAxisNameAlpha": "50",
        "sYAxisNameFont": "Arial",
        "sYAxisNameFontSize": "12",
        "sYAxisNameFontColor": "#003366",
        "sYAxisNameFontBold": "1",
        "sYAxisNameFontItalic": "1",
        "sYAxisNameAlpha": "50",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenues",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                }
            ]
        },
        {
            "seriesName": "Profits",
            "renderAs": "area",
            "showValues": "0",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                }
            ]
        },
        {
            "seriesName": "Profit %age",
            "parentYAxis": "S",
            "renderAs": "line",
            "showValues": "0",
            "data": [
                {
                    "value": "25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "16.66"
                },
                {
                    "value": "21.05"
                },
                {
                    "value": "6.66"
                },
                {
                    "value": "33.33"
                },
                {
                    "value": "6.25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "5.88"
                },
                {
                    "value": "36.36"
                },
                {
                    "value": "10.52"
                },
                {
                    "value": "30.43"
                }
            ]
        }
    ]
}

XML:


    
        < category label="Jan" />
        < category label="Feb" />
        < category label="Mar" />
        < category label="Apr" />
        < category label="May" />
        < category label="Jun" />
        < category label="Jul" />
        < category label="Aug" />
        < category label="Sep" />
        < category label="Oct" />
        < category label="Nov" />
        < category label="Dec" />
    
    
        < set value="16000" />
        < set value="20000" />
        < set value="18000" />
        < set value="19000" />
        < set value="15000" />
        < set value="21000" />
        < set value="16000" />
        < set value="20000" />
        < set value="17000" />
        < set value="22000" />
        < set value="19000" />
        < set value="23000" />
    
    
        < set value="4000" />
        < set value="5000" />
        < set value="3000" />
        < set value="4000" />
        < set value="1000" />
        < set value="7000" />
        < set value="1000" />
        < set value="4000" />
        < set value="1000" />
        < set value="8000" />
        < set value="2000" />
        < set value="7000" />
    
    
        < set value="25" />
        < set value="25" />
        < set value="16.66" />
        < set value="21.05" />
        < set value="6.66" />
        < set value="33.33" />
        < set value="6.25" />
        < set value="25" />
        < set value="5.88" />
        < set value="36.36" />
        < set value="10.52" />
        < set value="30.43" />
    

2.配置主(次)Y轴名称的背景属性

多系列组合2D图表的主(次)Y轴名称蓝色和半透明背景效果如下:

FusionCharts中文教程:自定义图表的双Y轴_第2张图片

配置双Y轴名称所需属性如下表:

属性名称 描述
pYAxisNameFontAlpha (sYAxisNameFontAlpha) 设置主(次)Y轴名称字体的透明度。
pYAxisNameBgColor (sYAxisNameBgColor) 设置主(次)Y轴名称的字体颜色。
pYAxisNameBgAlpha (sYAxisNameBgAlpha) 设置主(次)Y轴名称的背景透明度。

上面所示图表的数据结构如下:
JSON:

{
    "chart": {
        "caption": "Revenues and Profits",
        "subCaption": "For last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "pYAxisNameFont": "Arial",
        "pYAxisNameFontSize": "12",
        "pYAxisNameBgColor": "#3399ff",
        "pYAxisNameBgAlpha": "20",
        "pYAxisNameBorderPadding": "6",
        "pYAxisNameFontAlpha": "50",
        "sYAxisNameFont": "Arial",
        "sYAxisNameFontSize": "12",
        "sYAxisNameBgColor": "#3399ff",
        "sYAxisNameBgAlpha": "20",
        "sYAxisNameBorderPadding": "6",
        "sYAxisNameFontAlpha": "50",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenues",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                }
            ]
        },
        {
            "seriesName": "Profits",
            "renderAs": "area",
            "showValues": "0",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                }
            ]
        },
        {
            "seriesName": "Profit %age",
            "parentYAxis": "S",
            "renderAs": "line",
            "showValues": "0",
            "data": [
                {
                    "value": "25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "16.66"
                },
                {
                    "value": "21.05"
                },
                {
                    "value": "6.66"
                },
                {
                    "value": "33.33"
                },
                {
                    "value": "6.25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "5.88"
                },
                {
                    "value": "36.36"
                },
                {
                    "value": "10.52"
                },
                {
                    "value": "30.43"
                }
            ]
        }
    ]
}

XML:


    
        < category label="Jan" />
        < category label="Feb" />
        < category label="Mar" />
        < category label="Apr" />
        < category label="May" />
        < category label="Jun" />
        < category label="Jul" />
        < category label="Aug" />
        < category label="Sep" />
        < category label="Oct" />
        < category label="Nov" />
        < category label="Dec" />
    
    
        < set value="16000" />
        < set value="20000" />
        < set value="18000" />
        < set value="19000" />
        < set value="15000" />
        < set value="21000" />
        < set value="16000" />
        < set value="20000" />
        < set value="17000" />
        < set value="22000" />
        < set value="19000" />
        < set value="23000" />
    
    
        < set value="4000" />
        < set value="5000" />
        < set value="3000" />
        < set value="4000" />
        < set value="1000" />
        < set value="7000" />
        < set value="1000" />
        < set value="4000" />
        < set value="1000" />
        < set value="8000" />
        < set value="2000" />
        < set value="7000" />
    
    
        < set value="25" />
        < set value="25" />
        < set value="16.66" />
        < set value="21.05" />
        < set value="6.66" />
        < set value="33.33" />
        < set value="6.25" />
        < set value="25" />
        < set value="5.88" />
        < set value="36.36" />
        < set value="10.52" />
        < set value="30.43" />
    

3.配置主(次)Y轴名称的边框属性

多系列2D图表的主(次)Y轴名称带有紫色虚线边框的效果如下图所示:

FusionCharts中文教程:自定义图表的双Y轴_第3张图片

设置主(次)Y轴名称边框所需属性如下表:

属性名称 描述
pYAxisNameBorderColor (sYAxisNameBorderColor) 设置主(次)y轴名称边框的颜色。
pYAxisNameBorderAlpha (sYAxisNameBorderAlpha) 设置主(次)y轴名称边框的透明度。
pYAxisNameBorderPadding (sYAxisNameBorderPadding) 设置主(次)y轴名称边框的填充效果。
pYAxisNameBorderRadius (sYAxisNameBorderRadius) 设置主(次)y轴名称边框的直径。
pYAxisNameBorderThickness (sYAxisNameBorderThickness) 设置主(次)y轴名称边框的厚度。
pYAxisNameBorderDashed (sYAxisNameBorderDashed) 为1时将主(次)Y轴边框设置为虚线;为0时设置为正常。
pYAxisNameBorderDashLen (sYAxisNameBorderDashLen) 设置主(次)y轴名称虚线边框效果中的短线长度。
pYAxisNameBorderDashGap (sYAxisNameBorderDashGap) 设置主(次)Y轴名称虚线边框效果中两个短线之间的空白距离。

上面所示图标的数据结构如下:
JSON:

{
    "chart": {
        "caption": "Revenues and Profits",
        "subCaption": "For last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %age",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "pYAxisNameBorderColor": "#6666FF",
        "pYAxisNameBorderAlpha": "50",
        "pYAxisNameBorderPadding": "6",
        "pYAxisNameBorderRadius": "0",
        "pYAxisNameBorderThickness": "1",
        "pYAxisNameBorderDashed": "1",
        "pYAxisNameBorderDashLen": "4",
        "pYAxisNameBorderDashGap": "2",
        "sYAxisNameBorderColor": "#6666FF",
        "sYAxisNameBorderAlpha": "50",
        "sYAxisNameBorderPadding": "6",
        "sYAxisNameBorderRadius": "0",
        "sYAxisNameBorderThickness": "1",
        "sYAxisNameBorderDashed": "1",
        "sYAxisNameBorderDashLen": "4",
        "sYAxisNameBorderDashGap": "2",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenues",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                }
            ]
        },
        {
            "seriesName": "Profits",
            "renderAs": "area",
            "showValues": "0",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                }
            ]
        },
        {
            "seriesName": "Profit %age",
            "parentYAxis": "S",
            "renderAs": "line",
            "showValues": "0",
            "data": [
                {
                    "value": "25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "16.66"
                },
                {
                    "value": "21.05"
                },
                {
                    "value": "6.66"
                },
                {
                    "value": "33.33"
                },
                {
                    "value": "6.25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "5.88"
                },
                {
                    "value": "36.36"
                },
                {
                    "value": "10.52"
                },
                {
                    "value": "30.43"
                }
            ]
        }
    ]
}

XML:


    
        < category label="Jan" />
        < category label="Feb" />
        < category label="Mar" />
        < category label="Apr" />
        < category label="May" />
        < category label="Jun" />
        < category label="Jul" />
        < category label="Aug" />
        < category label="Sep" />
        < category label="Oct" />
        < category label="Nov" />
        < category label="Dec" />
    
    
        < set value="16000" />
        < set value="20000" />
        < set value="18000" />
        < set value="19000" />
        < set value="15000" />
        < set value="21000" />
        < set value="16000" />
        < set value="20000" />
        < set value="17000" />
        < set value="22000" />
        < set value="19000" />
        < set value="23000" />
    
    
        < set value="4000" />
        < set value="5000" />
        < set value="3000" />
        < set value="4000" />
        < set value="1000" />
        < set value="7000" />
        < set value="1000" />
        < set value="4000" />
        < set value="1000" />
        < set value="8000" />
        < set value="2000" />
        < set value="7000" />
    
    
        < set value="25" />
        < set value="25" />
        < set value="16.66" />
        < set value="21.05" />
        < set value="6.66" />
        < set value="33.33" />
        < set value="6.25" />
        < set value="25" />
        < set value="5.88" />
        < set value="36.36" />
        < set value="10.52" />
        < set value="30.43" />
    

你可能感兴趣的:(fusioncharts教程,fusioncharts图表,数据可视化,图表控件,图表解决方案)