HighCharts - 2nd yAxis图不能正确缩放

我遇到了使用HighCharts的第二个yAxis的问题。样条曲线图正确缩放，但条形图（第二个yAxis）没有。请注意，条形图有两个部分 - 无关部分是不可见的。HighCharts - 2nd yAxis图不能正确缩放

http://jsfiddle.net/warricksmith/jqvxf30z/1/

$(function() { 
$('#container').highcharts({ 
    chart: { 
     alignTicks: false, 
     backgroundColor: null, 
     spacingBottom: 6, 
     spacingLeft: 2, 
     spacingRight: 2, 
     spacingTop: 2 
    }, 
    credits: { 
     enabled: false 
    }, 
    global: { 
     useUTC: false 
    }, 
    legend: { 
     align: "center", 
     enabled: true, 
     layout: "horizontal", 
     verticalAlign: "bottom", 
     y: 5 
    }, 
    navigator: { 
     enabled: false, 
     height: 40, 
     series: { 
      color: "#21B567" 
     } 
    }, 
    plotoptions: { 
     column: { 
      borderwidth: 0 
     }, 
     line: { 
      lineWidth: 1, 
      marker: { 
       enabled: false 
      } 
     }, 
     series: { 
      pointInterval: null, 
      pointStart: null 
     }, 
     spline: { 
      lineWidth: 2, 
      marker: { 
       enabled: true 
      } 
     } 
    }, 
    rangeselector: { 
     enabled: false 
    }, 
    scrollbar: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Peak Demand', 
     stacking: null, 
     title: 'kVA', 
     type: 'spline', 
     color: "#FF6F34", 
     data: [821, 
     794, 
     737, 
     748, 
     778, 
     794, 
     889, 
     831, 
     819, 
     821, 
     821, 
     877], 
     tooltip: { 
      valueSuffix: 'kVA' 
     } 

    }, { 
     name: "Power at peak", 
     stacking: null, 
     title: "kVA", 
     tooltip: { 
      valueSuffix: " kVA" 
     }, 
     type: "spline", 
     color: "#33BAE3", 
     data: [788, 
     770, 
     722, 
     733, 
     747, 
     755, 
     747, 
     814, 
     803, 
     804, 
     805, 
     737] 


    }, { 
     color: "#339A63", 
     data: [ 
     0.04, 
     0.03, 
     0.02, 
     0.02, 
     0.04, 
     0.05, 
     0.16, 
     0.02, 
     0.02, 
     0.02, 
     0.02, 
     0.16], 
     name: "Power factor (lagging)", 
     stacking: 'normal', 
     title: "", 
     tooltip: { 
      valueSuffix: " " 
     }, 
     type: "column", 
     yAxis: 1 
    }, { 
     color: "rgba(245,241,232,0)", 
     data: [ 
     0.96, 
     0.97, 
     0.98, 
     0.98, 
     0.96, 
     0.95, 
     0.84, 
     0.98, 
     0.98, 
     0.98, 
     0.98, 
     0.84, ], 
     name: "Power factor (leading)", 
     stacking: "normal", 
     title: "", 
     tooltip: { 
      valueSuffix: " " 
     }, 
     type: "column", 
     yAxis: 1 
    }, ], 

    title: { 
     text: 'Peak Demand and Power factor' 
    }, 
    subtitle: { 
     text: 'Power-Star' 
    }, 
    xAxis: [{ 
     categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14', 
      'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'], 
     lables: { 
      style: { 
       fontSize: "12px", 
       fontWeight: "bold" 
      } 
     }, 
     tickPixelInterval: 150, 
     tickPosition: "inside", 
     type: "category" 
    }], 
    yAxis: [{ // Primary yAxis 
     gridLineWidth: 1, 
     index: 0, 
     labels: { 
      style: Object, 
      y: 10 
     }, 
     max: undefined, 
     maxPadding: null, 
     min: undefined, 
     opposite: false, 
     title: { 
      text: "kVA" 

     } 
    }, { 
     gridLineWidth: 0, 
     index: 1, 
     labels: { 
      enabled: false 
     }, 
     max: undefined, 
     maxPadding: null, 
     min: undefined, 
     opposite: false, 
     showLastLabel: false, 
     title: { 
      text: "" 
     } 
    }, { 
     gridLineWidth: 0, 
     index: 2, 
     labels: { 
      y: 10 
     }, 
     max: 1, 
     maxPadding: 0, 
     min: 0.8, 
     opposite: true, 
     title: { 
      text: "" 
     } 
    }, { 
     gridLineWidth: 0, 
     index: 3, 
     labels: { 
      enabled: false 
     }, 
     max: "1", 
     maxPadding: 0, 
     min: 0.8, 
     opposite: true, 
     showLastLabel: false, 
     title: { 
      text: "" 
     } 
    }, { 
     gridLineWidth: 0, 
     index: 4, 
     labels: { 
      enabled: false 
     }, 
     max: "1", 
     maxPadding: 0, 
     min: 0.8, 
     opposite: true, 
     showLastLabel: false, 
     title: { 
      text: "" 
     } 
    }], 
    tooltip: { 
     shared: true 
    }, 
});

}）;

来源

2015-03-03 NewSQL

如果你提供一个JSFiddle，它将对其他人有所帮助，例如http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/ demo/line-basic/ – SBirthare 2015-03-03 09:29:17

jsfiddle新增... – NewSQL 2015-03-03 12:03:55

问题是你有太多的yAxes，你犯了一个错误。您正在将系列连接到yAxis: 1，这意味着选项中的第二个yAxis。同时要设置min和max第三，第四和第五yAxes，并且只能用于第三个使标签..

固定演示：http://jsfiddle.net/jqvxf30z/2/

我设置为yAxis: 2系列，因为这是Y轴最有可能负责列。

来源

2015-03-03 12:54:20

HighCharts - 2nd yAxis图不能正确缩放

回答

相关问题