javascript - Highcharts 双 x 轴列 + 线正在向辅助 x 轴添加刻度

Question

使用双 x 轴时，我看到 highcharts 出现奇怪的行为。 Highcharts 本质上是在第二个轴的末尾添加额外的刻度。

背景 - 为什么我要这样做。

尝试创建一个具有固定类别(x 轴)和计数(y 轴)的柱形图，然后尝试绘制代表百分比的辅助绘图线(即 0 到 100 之间的某个位置)。为了做到这一点，我使用了辅助 x 轴，并且为了避免与柱形图冲突，我还使用了基于样条线的辅助 y 轴(但系列中没有数据)。

不幸的是，由于某种原因，辅助 x 轴(用于绘图线)在末尾添加了额外的刻度。在下面的 fiddle 中，即使该 x 轴上的最小值和最大值设置为从 0 到 100，它也会从 0 到 160。

知道如何强制辅助轴保持在 0 到 100 之间吗？

fiddle :

http://jsfiddle.net/5ypnffww/

Highcharts 配置:

{
        "chart": {},
        "title": {
            "text": "This survey run"
        },
        "xAxis": [
            {
                "title": {
                    "text": null
                },
                "categories": [
                    "Very low",
                    "Low",
                    "Neutral",
                    "High",
                    "Very high"
                ]
            },
            {
                "title": {
                    "text": null
                },
                "opposite": true,
                "plotLines": [
                    {
                        "color": "red",
                        "dashStyle": "longdashdot",
                        "value": 50,
                        "width": 2
                    }
                ],
                "labels": {
                    "enabled": true,
                    "step": 1
                },
                "min": 0,
                "max": 100
            }
        ],
        "yAxis": [
            {
                "min": 0,
                "title": {
                    "text": "Number of responses",
                    "align": "high"
                },
                "labels": {
                    "overflow": "justify"
                },
                "allowDecimals": false
            },
            {
                "min": 0,
                "title": {
                    "text": null
                },
                "opposite": true
            }
        ],
        "legend": {
            "enabled": false
        },
        "plotOptions": {
            "column": {
                "dataLabels": {
                    "enabled": true,
                    "color": "black",
                    "style": {
                        "fontWeight": "bold",
                        "text": "0 0 3px black"
                    }
                }
            }
        },
        "credits": {
            "enabled": false
        },
    "series": [
        {
            "name": "Responses",
            "type": "column",
            "pointRange": 0,
            "xAxis": 0,
            "yaxis": 0,
            "data": [
                0,
                1,
                1,
                8,
                1
            ]
        },
        {
            "name": "Net Position",
            "type": "spline",
            "pointRange": 0,
            "xAxis": 1,
            "yaxis": 1
        }
    ]
}

Answer 1

您需要在 xAxis 中设置一些选项，例如:

        startOnTick:true,
        endOnTick:true,
        tickPositions: [0, 20, 40, 60, 80, 100]

示例:http://jsfiddle.net/5ypnffww/3/