2016-02-02 57 views
0

好吧每個人,我都是一個剛入門的初學者,但我已經嘗試過對教程的傾注,我仍然沒有看到我的錯誤。我試圖複製一個圖形在Excel中製作的圖形,並在百分比堆積的條形圖上繪製樣條曲線。然而,我努力嘗試,我似乎無法使用以下代碼在次軸上繪製樣條曲線系列:Highcharts:第二個系列不會在第二軸上繪製

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Acumun Data Visualization</title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0- beta1/jquery.js"> 
</script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#container').highcharts({ 
    title: { 
     text: "Degree Type by Cohort" 
    }, 
    xAxis: [{ 
     categories: ['2006', '2007','2008', '2009','2010','2011','2012', 
       '2013','2014'], 
    crosshair: true 
}], 

yAxis: [{//primary Y Axis 
    gridLineWidth: 0, 
    min: 0, 
    max:100, 
    labels: { 
    format: '{value}%', 
    style: { 
     color: Highcharts.getOptions().colors[1] 
      } 
      }, 
    title: { 
     text: '% Degree Composition', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
     } 
    }, {//Secondary axis 
     min: 0, 
     max: 350, 
     gridLineWidth:1, 
     title:{ 
     text: 'Cohort size', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
     }, 
     labels: { 
     format: '{value}', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
       } 
       }, 
     opposite: true 
    }], 
    tooltip: { 
     shared: true 
    }, 
    plotOptions: { 
     column: { 
     stacking: 'percent' 
     } 
    }, 
    series: [{ //Bachelors data 
     name: 'BS', 
     type: 'column', 
     //yaxis: 1, 
     data: [1,27,75,121,145,136,45,64,59] 
    }, { //Masters data 
     name: 'MS', 
     type: 'column', 
     //yaxis: 1, 
     data: [8,21,46,54,68,77,44,32,44] 
    }, {//PhD Data 
     name: 'PhD', 
     type: 'column', 
     //yaxis: 1, 
     data: [22,57,54,78,84,74,45,46,48] 
    }, { //Cohort Size - Spline plot 
     name: 'Cohort Size', 
     type: 'spline', 
     yaxis: 1, 
     data: [31,105,175,253,297,287,134,142,151] 
    }] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div> 
</body> 
</html> 

回答

0

問題是一個簡單的錯字。在樣條線系列中,將yaxis改爲yAxis。

代碼是......

... 
}, { //Cohort Size - Spline plot 
    name: 'Cohort Size', 
    type: 'spline', 
    yaxis: 1, 
    data: [31,105,175,253,297,287,134,142,151] 
}] 
... 

代碼應該是...

... 
}, { //Cohort Size - Spline plot 
    name: 'Cohort Size', 
    type: 'spline', 
    yAxis: 1, 
    data: [31,105,175,253,297,287,134,142,151] 
}] 
... 
+0

甜仁慈的廢話!當然,它會很簡單。哦,那是爲了擡頭。我知道我必須正確地看待它。我對於正確的逗號放置非常偏執,我完全忽略了適當的camelCase語法。 – RyanM