highcharts - 我的多轴 Highcharts 图表忽略了我为第一个 y 轴设置的最大值

Question

我有这个多轴图表。

它使用 Ruby gem 编码lazy_high_charts，但与 Highcharts 的唯一区别是 Ruby 语法。

我的问题是我已经将第一个设置yAxis为:max => 10，因为没有任何值会高于 10。但由于某种原因，这被忽略了。有任何想法吗？

@rating_development = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => "Some title")
  f.xAxis(:categories => categories, :tickInterval => categories.size / 10, :labels => {:y => 27})
  f.series(:name => "1st thing", :color => "#000000", :lineWidth => 4, :yAxis => 0, :data => first_data_set, :marker => { :enabled => false })
  f.series(:name => "2nd thing", :color => "#0030ff", :yAxis => 1, :data => second_data_set, :marker => { :enabled => false }, :dash_style => 'shortdot')
  f.series(:name => "3rd thing", :color => "#ff0006", :yAxis => 2, :data => third_data_set, :marker => { :enabled => false }, :dash_style => 'shortdot')

  f.yAxis [
    {:title => {:text => "1st thing", :style => {:color => "#000000"}}, :tickInterval => 1, :max => 10, :plotBands => [{:color => '#af0000', :from => 0, :to => 3}, {:color => '#df7000', :from => 3, :to => 5}, {:color => '#f4d600', :from => 5, :to => 7}, {:color => '#87b014', :from => 7, :to => 9}, {:color => '#5aa417', :from => 9, :to => 10}], :labels => {:style => {:color => "#000000"}}},
    {:title => {:text => "2nd thing", :style => {:color => "#0030ff"}}, :opposite => true, :min => 0, :labels => {:style => {:color => "#0030ff"}}},
    {:title => {:text => "3rd thing", :style => {:color => "#ff0006"}}, :opposite => true, :min => 0, :labels => {:style => {:color => "#ff0006"}}}
  ]
  f.legend(:enabled => false)
end

Answer 1

将第一个 yAxis 的最小值设置为 0（使用 :min => 0）。

看到这个 jFiddle：http: //jsfiddle.net/4u8eb/

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            labels:{
                y: 27
             },
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        series: [{
            linewidth: 4,
            name: 'Rainfall',
            color: '#4572A7',
            yAxis: 0,
            data: [9, 9, 9, 10, 9, 9, 10, 9, 9, 9,9,9],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            yAxis: 1,
            color: '#89A54E',
            type: 'spline',
            data: [0, 2, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
            name: 'baba',
            yAxis: 2,
            color: '#89A54E',
            type: 'spline',
            data: [0, 2, 44, 24, 24, 24, 24, 24, 24, 24, 24, 24],
            tooltip: {
                valueSuffix: '°C'
            }
        }],
        yAxis: [{ // Secondary yAxis
            min: 0,
            max: 10,
            tickInterval: 1,
            title: {
                text: 'Rainfall',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            }
        }, { // Primary yAxis
            opposite: true,
            min: 0,
            labels: {
                format: '{value}°C',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // 3rd yAxis
            min:0,
            opposite: true,
            title: {
                text: 'Baba',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            }
        }],
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false,
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: '#FFFFFF'
        },

    });
});

如果您注释第一个轴的最小值，您会遇到与您相同的问题。使用最小值集，则尊重最大值。

您也可以在图表选项中使用“alignTicks: false”，但它在视觉上会让人感到困惑。