Highcharts图表中x轴刻度带有偏移量

Question

我正在尝试移除x轴刻度的偏移量offset。

我希望第一个刻度10/8从x轴和y轴交点开始。 10-8应该在两个标签之间的标记上。

以下是我在highchart中的代码。

xAxis: {
            categories: categories,
            title: {
              text: title_x_axis,
              style: {
                fontWeight: 'bold'
              },
              formatter: function(){
                return "<h3><b>" + this.value + "</b></h3>";  
              }
            },
            min: 0,
            startOnTick: true,
            endOnTick: true,
            minPadding: 0,
            maxPadding: 0,
            align: "left"               
        },

Max padding和min padding都设置为0，所以我不知道问题出在哪里？

编辑：

我创建了一个fiddle，展示了我正在处理的图表类型。 请注意，下面的图像具有不同的x轴值，因为我没有使用相同的fiddle值。 此外，在我拍摄快照后，我设置了tickmarkPlacement: "on"。 我希望Jan标签从线的开头开始。它目前有一些偏移量。

有人能帮我解决这个问题吗？

- Ashish Singh

---

根据你的x轴线，你的数据点似乎位于每个点的中间。这意味着你的x轴没有偏移，并且实际上从刻度开始。能否在http://JSFiddle.net上复制该图表？ - James Donnelly

@JamesDonnelly：我已经编辑了这个问题，你能看一下吗？ - Ashish Singh

Answer 1

你可以使用（假设“categories”是你的类别数组）

 min: 0.5,
 max: categories.length-1.5,
 startOnTick: false,
 endOnTick: false,

示例： http://jsfiddle.net/27hg0v06/1/

使用最新版本的Highcharts以获得完全工作的工具提示：

<script src="http://github.highcharts.com/highcharts.js"></script>

- Kacper Madej

---

在这个 jsFiddle 中，数据在 y 方向上实际上超出了图表范围。我猜测是因为格式化程序由于 .length - 1.5 参数而查看了一个数据点之前的数据。你如何阻止这种情况发生，但仍然保持 OP 所期望的端到端效果？ - elPastor

@pshep123，您是在指答案中的JSFiddle演示吗？数据在y方向上并没有关闭，而.length - 1.5是关于x轴（左右），因此与y方向（上下）无关。请协作或者开一个新问题。 - Kacper Madej

我正在使用这段代码，但如果值为2，则无法正常工作。有什么想法吗？ - Allan Jebaraj

@AllanJebaraj 我假设你正在使用2个类别。将min更改为0.499将解决问题：https://jsfiddle.net/BlackLabel/6v0578x1/3/ 如果我假设错误，请提供更多信息和有关问题的实时演示。 - Kacper Madej

Answer 2

在plotOptions中添加pointPlacement: 'on'。

plotOptions: {
    series: {
     pointPlacement: 'on'
   }
}

- Manjula Reshmi

Answer 3

看一下tickMarkPlacement属性：

• http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

默认情况下，它是“between”，这就是您在图表上看到的。

将其设置为“on”应该可以满足您的需求。

除了tickMarkPlacement之外，您还可以查看minPadding和maxPadding属性：

• http://api.highcharts.com/highcharts#xAxis.minPadding

• http://api.highcharts.com/highcharts#xAxis.maxPadding

- jlbriggs

---

Yaa 'tickmarkPlacement: "0"' 它把标签放在了标记上，但是我该如何将其位置更改为 x 轴的起始位置？ - Ashish Singh

如果您将这些属性与Kacper在此页面上提到的endOntick/startOnTick、min/max相结合，您应该能够完全控制轴起点/终点的每个方面。 - jlbriggs

Answer 4

更新的 Fiddle：

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tickInterval: 1,
            tickmarkPlacement: "on",
            startOnTick: true,
            endOnTick: true,
            minPadding: 0,
            maxPadding: 0,
            offset: 0
        },
        plotOptions: {
          series: {
            findNearestPointBy: 'x',
            label: {
              connectorAllowed: false
            },
            pointPlacement: 'on'
          }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

在系列对象之前，您只需要添加以下内容：

plotOptions: {
          series: {
            findNearestPointBy: 'x',
            label: {
              connectorAllowed: false
            },
            pointPlacement: 'on'
          }
        },

- Saumyajit