Highcharts示例修改

以下是我想要修改的Highcharts示例的鏈接。我想有正確的2個Y軸成爲一個。目前，圖中的每條線都與一個Y軸對應，因爲它們具有不同的比例。我想要創建的圖表將有1個正確的軸，但對應於圖表中兩條線的最低和最高極限。例如，如果A行的值爲5（並且低於B行中的任何值），並且行B的極值爲90（並且高於A中的任何值），則這2個值用於軸。圖表上的兩條線應對應於一個比例。Highcharts示例修改

鏈接：http://www.highcharts.com/demo/combo-multi-axes

Curernt代碼：

var chart; 
      $(document).ready(function() { 
       chart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'container', 
        }, 
        title: { 
         text: 'Example 1' 
        }, 
        xAxis: [{ 
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
        }], 
        yAxis: [{ // Primary yAxis 
         labels: { 
          formatter: function() { 
           return this.value +'%'; 
          }, 
          style: { 
           color: '#89A54E' 
          } 
         }, 
         title: { 
          text: 'Percent Change', 
          style: { 
           color: '#89A54E' 
          } 
         }, 
         opposite: true 

        }, { // Secondary yAxis 
         gridLineWidth: 0, 
         title: { 
          text: 'Measure', 
          style: { 
           color: '#4572A7' 
          } 
         }, 
         labels: { 
          formatter: function() { 
           return this.value + 'k'; 
          }, 
          style: { 
           color: '#4572A7' 
          } 
         } 
        }, { // Tertiary yAxis 
         gridLineWidth: 0, 
         title: { 
          text: '', 
          style: { 
           color: '#AA4643' 
          } 
         }, 
         labels: { 
          formatter: function() { 
           return this.value +' %'; 
          }, 
          style: { 
           color: '#AA4643' 
          } 
         }, 
         opposite: true 
        }], 

       series: [{ 
        name: 'Measures', //Button on Graph -- Measures 
        color: '#363534', 
        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, 95.6, 54.4], 
      }, { 
        name: 'Percentage Change 1', //Button on Graph -- Purple 
        type: 'spline', 
        color: '#E17000', 
        yAxis: 2, 
        data: [30,40,35,25,14,25,39,28,21,78,23,36,5], 
        marker: { 
         enabled: false 
      }, 
        dashStyle: 'shortdot' 
      }, { 
        name: 'Percentage Change 2', //Button on Graph -- Orange 
        color: '#A31A7E', 
        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, 35], 
      }] 
       }); 
      });

來源

2011-11-17 majestic1

首先，也許是考慮代表數據的另一種方式。多重量表可能是精神緊張。

其次，這可能有幫助嗎？我已經刪除了$(document).ready...包裝。

  var chart; 

     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
      }, 
      title: { 
       text: 'Example 1' 
      }, 
      xAxis: [{ 
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }], 
      yAxis: [{ // Primary yAxis 
       labels: { 
        formatter: function() { 
         return this.value +'%'; 
        }, 
        style: { 
         color: '#878787' 
        } 
       }, 
       title: { 
        text: 'Percent Change', 
        style: { 
         color: '#878787' 
        } 
       }, 
       opposite: true 

      }, { // Secondary yAxis 
       gridLineWidth: 0, 
       title: { 
        text: 'Measure', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       labels: { 
        formatter: function() { 
         return this.value + 'k'; 
        }, 
        style: { 
         color: '#4572A7' 
        } 
       } 
      }], 
     series: [{ 
      name: 'Measures', //Button on Graph -- Measures 
      color: '#363534', 
      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, 95.6, 54.4], 
    }, { 
      name: 'Percentage Change 1', //Button on Graph -- Purple 
      type: 'spline', 
      color: '#E17000', 
      data: [30,40,35,25,14,25,39,28,21,78,23,36,5], 
      marker: { 
       enabled: false 
    }, 
      dashStyle: 'shortdot' 
    }, { 
      name: 'Percentage Change 2', //Button on Graph -- Orange 
      color: '#A31A7E', 
     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, 35], 
}] });

來源

2011-11-18 01:29:37 mg1075

有設置YAXIS屬性串聯陣列的一個選項。使兩個系列對象的yAxis：0。無論圖表上的系列項目數量如何，這應該會給出一個Y軸。

來源

2014-12-03 14:55:24

Highcharts示例修改

回答

相關問題