Question

我正在尝试使用HighCharts创建图表，其中辅助Y轴位置未正确显示。随着数据串联修改，辅助轴保持移动。这仅在3D图表的情况下发生。在下面的示例中：

$(function () {
  var title="Sales($ '000)";
  $('#BatChart_CP1').highcharts({
  chart: {
  margin: 75,
  options3d: {
  enabled: true,
  alpha: 15,
  beta: 8,
  depth: 60,
  viewDistance: 35
  }

  },
  title: {
  text: ''
  },
  xAxis: [{
  categories: ['Q1','Q2','Q3','Q4'],
  lineColor: '#000',
  min: 0,
  lineWidth: 1,
  labels: {
  style: {
  font: '12px Arial',
  color: 'black'
  }
  }, min: 0,
  }],
  yAxis: [{ // Primary yAxis
  title: {
  text: 'Sales($' + "'" + '000)',
  style: {
  font: '12px Arial',
  color: 'black'
  }
  }, min: 0,
  labels: {
  style: {
  font: '12px Arial',
  color: 'black'
  }
  },
  lineColor: '#000',
  lineWidth: 1,
  }, { // Secondary yAxis
  title: {
  text: '% of Franchise Sales',
  style: {
  font: '12px Arial',
  color: 'black'
  }
  },
  labels: {
  formatter: function () {
  return this.value + '%';
  },
  style: {
  font: '12px Arial',
  color: 'black'
  }
  },
  offset:100,
  min: 0,
  lineColor: '#000',
  lineWidth: 1,
  opposite: true
  }],
  tooltip: {
  shared: true
  },
  plotOptions: {
  column: {
  pointPadding: 0,
  borderWidth: 0,
  depth: 20,
  dataLabels: {
  enabled: true,
  rotation: -90,
  color: 'White',
  align: 'right',
  format: '{point.y}', // one decimal
  y: 5, // 10 pixels down from the top
  style: {
  font: 'bold 13px Arial ',
  textShadow: '0 0 0px black'
  }

  }
  },
  series: {
  pointWidth: 35
  }
  },
  series: [{ name: 'ACT ',type: 'column', data: [641,627,null,null], color: '#0070C0' },
  { name: 'BUD ',type: 'column', data: [128,88,60,82], color: 'rgb(230, 81, 0)' },
  { name: '% of Franchise Sales',type: 'spline',yAxis: 1,zIndex:999,data: [6.3,11.5,null,null],tooltip: {valueSuffix: '%'},color: '#b71c1c'}]
  });
  });

You can check on following Link

Answer 1

您可以在辅助轴上使用x和y位置作为标题和标签，例如以下示例：

                // Secondary yAxis
                title: {
                    text: '% of Sales',
                    style: {
                        font: '12px Arial',
                        color: 'black'
                    },
                    x:-120
                },
                labels: {
                    formatter: function () {
                        return this.value + '%';
                    },
                    style: {
                        font: '12px Arial',
                        color: 'black'
                    },
                    x:120
                },

你可以在这里试试http://jsfiddle.net/fgg563cf/1/

Answer 2

您可以使用offset参数并对齐yAxis。

offset:100

示例：http://jsfiddle.net/kngx5zpt/1/

高位上的辅助y轴位置不在正确位置

2 个答案: