Highcharts x 轴刻度以偏移量开始

Posted 2023-03-14

【中文标题】Highcharts x 轴刻度以偏移量开始

【英文标题】：Highcharts x-axis tick starts with an offset

【发布时间】：2014-10-14 15:46:42

【问题描述】：

我正在尝试删除x-axis 的勾号上的offset。

我希望第一个刻度 10/8 从 x-axis 和 y-axis 交叉点开始。

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 轴值，因为我没有使用相同的小提琴值。 在拍摄快照后，我还设置了tickmarkPlacement: "on"。 我希望 Jan 标签从行首开始。它目前有一些偏移量。

谁能帮我解决这个问题？

【问题讨论】：

根据 xAxis 上的线条，您的数据点似乎包含在每个点之间的中间。这意味着您的 xAxis 没有偏移量，实际上是在滴答声上开始的。你能在JSFiddle.net 上复制这个图吗？

@JamesDonnelly：我已经编辑了问题，你可以看看它。

【参考方案1】：

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

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

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

使用 newset 版本的 highcharts 获得完整的工具提示：

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

【讨论】：

在这个 jsFiddle 中，数据实际上在 y 方向上偏离了图表。我猜是因为由于.length - 1.5 参数，格式化程序正在寻找一个数据点。你怎么能阻止这种情况的发生，但仍然具有 OP 正在寻找的端到端效果？

@pshep123 您指的是答案中的 JSFiddle 演示吗？数据不在 y 方向上，.length - 1.5 是关于 xAxis（左右），所以与 y 方向（上下）无关。请合作或提出一个新问题。

我正在使用此代码，但如果值为 2，则它不起作用。有什么想法吗？

@AllanJebaraj 我假设您使用的是 2 个类别。将 min 更改为 0.499 将解决问题：jsfiddle.net/BlackLabel/6v0578x1/3 如果我假设错误，请提供更多信息和问题的现场演示。

【参考方案2】：

看看tickMarkPlacement属性：

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

默认情况下，它是“介于”，即您在图表上看到的。

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

除了tickMarkPlacement，你还可以查看minPadding和maxPadding属性：

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

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

【讨论】：

Yaa 'tickmarkPlacement: "0"' 它得到了标记上的标签，但是如何将位置更改为 x 轴的开始？

如果您将这些属性与本页 Kacper 的回答中提到的 endOntick/startOnTick, min/max 结合起来，您应该能够完全控制轴起点/终点的各个方面。跨度>

【参考方案3】：

在 plotOptions 中添加 pointPlacement: 'on'。

plotOptions: 
    series: 
     pointPlacement: 'on'
   

【参考方案4】：

更新小提琴：

$(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'
          
        ,