Question

我有以下代码来绘制坐标空间（JSBin），我发现Y轴的标题/图例（即x 10000）太靠近Y轴;我想把它移动一点点。如果我将yAxis: { title: { y: 0 } }更改为yAxis: { title: { y: -5 } }，则其中的一部分将隐藏在后面。也许我们可以把整个系统移到左下角一点点？

有没有人有一个好的解决方案？

<!DOCTYPE html>
<html>
<body>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <div id="container" style="height:400px;margin:1.5em 1em;"></div>

  <script>
    var chart = new Highcharts.Chart({
    chart: {
      renderTo:'container',
      type:'area'
    },
    credits: false,
    legend: false,
    title: { text:"" },
    tooltip: {},
    plotOptions: {
      series: {
        color:'rgba(156,156,156,.9)',
        fillColor:'#ffffff',
        lineWidth:1,
        marker: {
          enabled:false,
          states: {
            hover: {
              enabled:false
            }
          }
        }
      }
    },
    xAxis: {
      tickmarkPlacement:'on',
      categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3]
    },
    yAxis: {
      title: { text: "x 10000", rotation: 0, y: 0, x:10, margin: -40, align: 'high'},
      tickLength: 10,
      tickWidth: 1,
      lineWidth: 1,
      tickmarkPlacement:'on',
      gridLineColor:'#ffffff',
      categories:[0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
    },
    series:[{  
        data:[[1,1],[1,3],[2,3],[2,1],[1,1]]
    }]      
  });
  </script>
</body>
</html>

Answer 1

我找到了解决方案。你想在这里添加marginTop：

chart: {
  renderTo:'container',
  type:'area',
  marginTop: 30
},

然后你可以在标题中添加负面位置。 :) MarginTop基本上会将您的绘图区域向下移动，因此您在顶部有一些空白区域。

https://api.highcharts.com/highcharts/chart.marginTop

将图例移动一点点

1 个答案: