Question

好的每个人，我是初学者，但我已经尝试过倾向于教程，但我仍然没有看到我的错误。我正在尝试使用样条曲线图在一个百分比堆积条形图上复制Excel中生成的图形。无论我怎么努力，我似乎无法使用下面的代码在辅助轴上绘制样条系列：

<!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>

Answer 1

问题是一个简单的错字。在样条曲线系列中，将y轴更改为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]
}]
...

Highcharts：第二个系列不会在第二轴上绘制

1 个答案: