Highcharts翻譯系列之二十二:柱狀圖例子

Highcharts翻譯系列之二十二:柱狀圖例子
代碼:

[html]
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Highcharts Example</title> 
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
        $(function () { 
            var chart; 
            $(document).ready(function () { 
                chart = new Highcharts.Chart({ 
                    chart: { 
                        renderTo: 'container', 
                        type: 'column', 
                        margin: [35, 10, 40, 50], 
                        plotBorderWidth: 1, 
                        plotBorderColor: '#625f5f', 
                        animation: false, 
                        style: 
                        { 
                            fontFamily: 'Microsoft YaHei', 
                            fontSize: '12px', 
                            color: '#262626' 
                        } 
                    }, 
                    colors: [ 
 
                           '#7bd5f3', 
                           '#fbe659', 
                             "#fca108", 
 
                            ], 
                    title: { 
                        text: '柱狀圖', 
                        x: 60, 
                        y: 9, 
                        style: { 
                            // display: 'none', 
                            fontFamily: 'Microsoft YaHei', 
                            fontSize: '20px', 
                            fontWeight: 'Bold', 
                            color: '#262626' 
                        } 
                    }, 
                    subtitle: { 
                        style: { 
                            display: 'none' 
                        } 
                    }, 
                    xAxis: { 
                        //lineWidth: 1, 
                        // lineColor: '#625f5f', 
                        labels: 
                        { 
                            style: { 
                                color: '#262626', 
                                fontSize: '12px', 
                                marginTop: 5 
                            } 
 
                        }, 
                        categories: ['平和質', '氣虛質', '陽虛質', '陰虛質', '痰濕質', '濕熱質', '血瘀質', '氣鬱質', '特稟質'] 
                    }, 
                    yAxis: { 
                        allowDecimals: false, 
                        min: 0, 
                        max: 100, 
                        alternateGridColor: '#f6f6f6', 
 
                        // lineWidth: 1, 
                        gridLineWidth: 1, 
                        //tickPosition: 'inside', 
                        gridLineColor: '#c5c5c5', 
                        //offset: -3, 
                        //  lineColor: '#625f5f', 
                        plotLines: [{ 
                            value: 30, 
                            color: '#439c07', 
                            dashStyle: 'solid', 
                            width: 2, 
                            label: { 
                                text: '傾向', 
                                align: 'left', 
                                x: -25, 
                                style: { 
                                    color: '#439c07' 
                                } 
                            } 
                        }, { 
                            value: 40, 
                            color: '#dd0202', 
                            dashStyle: 'solid', 
                            width: 2, 
                            label: { 
                                text: '判定', 
                                align: 'left', 
                                x: -25, 
                                style: { 
                                    color: '#dd0202' 
                                } 
                            } 
                        }], 
                        title: { 
                            text: '分數', 
                            style: { 
                                display: 'none' 
 
                            } 
                        }, 
                        labels: { 
                            enabled: false 
                        } 
                    }, 
                    legend: { 
                        layout: 'horizontal', 
                        backgroundColor: '#FFFFFF', 
                        align: 'right', 
                        verticalAlign: 'top', 
                        x: 0, 
                        y: -10, 
                        floating: true, 
                        shadow: false, 
                        enabled: false 
                    }, 
                    tooltip: { 
                        formatter: function () { 
                            return '' + 
                        this.x + ': ' + this.y + '分'; 
                        } 
                    }, 
                    plotOptions: { 
                        column: { 
                            pointPadding: 0.001, 
                            borderWidth: 0, 
                            shadow: false, 
                             animation: false 
                        } 
                    }, 
                    series: [{ 
                        name: '我的主要體質', 
 
                        data: [{ y: 10, color: 'red', name: '5' }, { y: 23, color: '#7bd5f3', name: '5' }, { y:45, color: '#7bd5f3', name: '5' }, { y:  
 
70, color: '#fbe659', name: '5' }, { y: 55, color: '#7bd5f3', name: '5' }, { y: 60, color: '#fca108', name: '5' }, { y: 32, color: '#7bd5f3',  
 
name: '5' }, { y: 65, color: '#7bd5f3', name: '5' }, { y: 24, color: '#7bd5f3', name: '5'}], 
                        dataLabels: { 
                            enabled: true, 
                            rotation: 0, 
                            color: '#262626', 
                            align: 'center', 
                            x: -3, 
                            y: 15, 
                            formatter: function () { 
 
                                if (this.y != 0) { 
                                    return this.y  + "分"; 
                                } 
                            }, 
                            style: { 
                                fontSize: '13px', 
                                fontFamily: 'Microsoft YaHei' 
 
                            } 
                        } 
 
                    }] 
                }); 
            }); 
 
        }); 
    </script> 
</head> 
<body> 
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script> 
    <!– <script src="../../js/modules/exporting.js"></script>–> 
    <p id="container" style="width: 800px; height: 475px; margin: 0 auto"> 
    </p> 
</body> 
</html> 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Highcharts Example</title>
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        margin: [35, 10, 40, 50],
                        plotBorderWidth: 1,
                        plotBorderColor: '#625f5f',
                        animation: false,
                        style:
                        {
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12px',
                            color: '#262626'
                        }
                    },
                    colors: [

                        '#7bd5f3',
                        '#fbe659',
                             "#fca108",

                            ],
                    title: {
                        text: '柱狀圖',
                        x: 60,
                        y: 9,
                        style: {
                            // display: 'none',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '20px',
                            fontWeight: 'Bold',
                            color: '#262626'
                        }
                    },
                    subtitle: {
                        style: {
                            display: 'none'
                        }
                    },
                    xAxis: {
                        //lineWidth: 1,
                        // lineColor: '#625f5f',
                        labels:
                        {
                            style: {
                                color: '#262626',
                                fontSize: '12px',
                                marginTop: 5
                            }

                        },
                        categories: ['平和質', '氣虛質', '陽虛質', '陰虛質', '痰濕質', '濕熱質', '血瘀質', '氣鬱質', '特稟質']
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        max: 100,
                        alternateGridColor: '#f6f6f6',

                        // lineWidth: 1,
                        gridLineWidth: 1,
                        //tickPosition: 'inside',
                        gridLineColor: '#c5c5c5',
                        //offset: -3,
                        //  lineColor: '#625f5f',
                        plotLines: [{
                            value: 30,
                            color: '#439c07',
                            dashStyle: 'solid',
                            width: 2,
                            label: {
                                text: '傾向',
                                align: 'left',
                                x: -25,
                                style: {
                                    color: '#439c07'
                                }
                            }
                        }, {
                            value: 40,
                            color: '#dd0202',
                            dashStyle: 'solid',
                            width: 2,
                            label: {
                                text: '判定',
                                align: 'left',
                                x: -25,
                                style: {
                                    color: '#dd0202'
                                }
                            }
                        }],
                        title: {
                            text: '分數',
                            style: {
                                display: 'none'

                            }
                        },
                        labels: {
                            enabled: false
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        backgroundColor: '#FFFFFF',
                        align: 'right',
                        verticalAlign: 'top',
                        x: 0,
                        y: -10,
                        floating: true,
                        shadow: false,
                        enabled: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '' +
                        this.x + ': ' + this.y + '分';
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.001,
                            borderWidth: 0,
                            shadow: false,
                             animation: false
                        }
                    },
                    series: [{
                        name: '我的主要體質',

                        data: [{ y: 10, color: 'red', name: '5' }, { y: 23, color: '#7bd5f3', name: '5' }, { y:45, color: '#7bd5f3', name: '5' }, { y:

70, color: '#fbe659', name: '5' }, { y: 55, color: '#7bd5f3', name: '5' }, { y: 60, color: '#fca108', name: '5' }, { y: 32, color: '#7bd5f3',

name: '5' }, { y: 65, color: '#7bd5f3', name: '5' }, { y: 24, color: '#7bd5f3', name: '5'}],
                        dataLabels: {
                            enabled: true,
                            rotation: 0,
                            color: '#262626',
                            align: 'center',
                            x: -3,
                            y: 15,
                            formatter: function () {

                                if (this.y != 0) {
                                    return this.y  + "分";
                                }
                            },
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Microsoft YaHei'

                            }
                        }

                    }]
                });
            });

        });
    </script>
</head>
<body>
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
    <!– <script src="../../js/modules/exporting.js"></script>–>
    <p id="container" style="width: 800px; height: 475px; margin: 0 auto">
    </p>
</body>
</html>

 

運行效果:

 

\

 

 

發佈留言