HighChart jQuery插件如何生成Y标签

Question

y和y轴的起始编号和增量值在哪里？ 为什么它们从5和0开始并以它们的数字递增？ 我想创建以特定间隔而不是这段代码中的标签的标签。 我只是不知道在哪里更改它。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>

        <!-- 1a) Optional: add a theme file -->
        <!--
            <script type="text/javascript" src="../js/themes/gray.js"></script>
        -->

        <!-- 1b) Optional: the exporting module -->
        <script type="text/javascript" src="../js/modules/exporting.js"></script>


        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">

            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Average Monthly Temperature and Rainfall in Tokyo'
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com'
                    },
                    xAxis: [{
                        categories: ['0','50', '100', '150', '200', '250', '300', 
                            '350', '400', '450', '500']
                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            formatter: function() {
                                return this.value + 100+ '°C';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: 'Temperature',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Rainfall',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' mm';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true
                    }],
                    tooltip: {
                        formatter: function() {
                            return ''+
                                this.x +': '+ this.y +
                                (this.series.name == 'Rainfall' ? ' mm' : '°C');
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        x: 120,
                        verticalAlign: 'top',
                        y: 100,
                        floating: true,
                        backgroundColor: '#FFFFFF'
                    },
                    series: [{
                        name: 'Rainfall',
                        color: '#4572A7',
                        type: 'column',
                        yAxis: 1,
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]      

                    }, {
                        name: 'Temperature',
                        color: '#89A54E',
                        type: 'spline',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9]
                    }]
                });


            });

        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


    </body>
</html>

Answer 1

尝试从参考中使用yAxis.min和yAxis.max ： http : yAxis.max 。

例如，

max: 125

jsFiddle在这里： http : //jsfiddle.net/Wax78/

（请注意，在您的示例中， Temperature的主要yAxis已添加了+100。）

HighChart jQuery插件如何生成Y标签

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-12-13 03:03:55

HighChart jQuery插件如何生成Y标签

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-12-13 03:03:55

解决方案1
0 已采纳 2011-12-13 03:03:55