Question

我使用以下代码（JSBin）绘制坐标空间。我不明白的是，为什么（-1.7,0）不是原点？看来原点代表（-1.675，-0.25），这不是我想要的。

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

默认情况下，Highcharts会自动计算两个轴的极值。如果图中没有值接近第一类（在您的示例中为1.7），则不会将其用于设置最小极值。您可以使用min和max属性手动设置极值：

xAxis: {
  tickmarkPlacement:'on',
  categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3],
  min: 0,
  max: 8
};

我认为在这种情况下使用类别是坏主意。类别只是Highcharts如何格式化轴标签，数据标签，工具提示等的信息。类别的实际y轴值是数组中的索引。所以如果你创建这样的类别：

categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3]

他们将被视为字符串，其数值为 0,1,2,3 ......

这意味着当您使用此选项创建一个点时：{x: 0, y: 5}它将高于-1.7类别 - 它会变得非常混乱。

您应该使用以下选项操作轴上的数值（不是categories数组）：

坐标空间的起源

1 个答案: