Highcharts x-axis 标签未超出界限

Question

我目前在使用 Highcharts 时遇到问题，非常感谢任何有自定义图表经验的人提供帮助。

我想要实现的是让 x-axis 标签在图形宽度的 0% 和 100% 处开始和结束。相反，它们似乎沿着 x-axis 周期性地放置，正如您将在下面的屏幕截图中看到的那样。 （抱歉画质不佳）

JSFiddle: http://jsfiddle.net/8uqyz1o0/

在上面的屏幕截图中，我一直在尝试制作第一个标签（本例中由 Highcharts 渲染的 Oct 13），从 x-axis 0 位置开始。然而，正如您在屏幕截图中看到的那样，有大量的白色 space 填充。

将不胜感激，因为我相信我已经尝试了 Highcahrts API 文档 (http://api.highcharts.com/highcharts) 中的所有内容。

JSFiddle: http://jsfiddle.net/8uqyz1o0/

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 800px"></div>

JS（jQuery依赖）

var ChartData = {
    "chart": {
        "type": "area",
            "spacing": [0, 0, 0, 0],
            "margin": [0, 0, 30, 0],
            "width": null,
            "height": null,
            "backgroundColor": null
    },
        "title": {
        "text": ""
    },
        "xAxis": {
        "type": "datetime",
            "lineWidth": 0,
            "minPadding": 1,
            "maxPadding": 0,
            "tickWidth": 0,
            "gridLineColor": "#333",
            "labels": {
            "style": {
                "color": "#ccc",
                    "font": "14px Arial, Helvetica, sans-serif"
            }
        }
    },
        "yAxis": {
        "title": {
            "enabled": false
        },
            "showFirstLabel": true,
            "showLastLabel": false,
            "gridLineColor": "rgba(0,0,0,0.2)",
            "gridZIndex": 20,
            "labels": {
            "enabled": true,
                "x": 10,
                "y": -10,
                "align": "left",
                "distance": 0,
                "useHTML": true,
                "zIndex": 0
        }
    },
        "tooltip": {
        "shared": true,
            "useHTML": true,
            "headerFormat": "",
            "footerFormat": "",
            "valueDecimals": 0,
            "shadow": false,
            "hideDelay": 200
    },
        "plotOptions": {
        "area": {
            "stacking": "normal",
                "lineWidth": 3,
                "marker": {
                "enabled": true,
                    "symbol": "circle",
                    "lineColor": null,
                    "radius": 4,
                    "lineWidth": 2,
                    "fillColor": null,
                    "states": {
                    "hover": {
                        "enabled": true,
                            "radiusPlus": 2,
                            "lineWidthPlus": 0,
                            "lineColor": "#fff"
                    }
                }
            }
        }
    },
        "legend": {
        "enabled": false
    },
        "series": [{
        "name": "Diversified Growth",
            "portfolioType": 4,
            "data": [
            [1411516800000, 56000],
            [1411948800000, 56000],
            [1412553600000, 56000],
            [1413158400000, 56000],
            [1413763200000, 56000],
            [1414368000000, 56000],
            [1414972800000, 56000],
            [1415577600000, 56000],
            [1416182400000, 56000],
            [1416787200000, 56000],
            [1417392000000, 56000],
            [1417996800000, 56000],
            [1418601600000, 56000],
            [1419206400000, 56000],
            [1419379200000, 56000]
        ],
            "color": "#60c896",
            "fillColor": "#2bb673",
            "marker": {
            "fillColor": "#2bb673"
        }
    }, {
        "name": "Local Growth",
            "portfolioType": 1,
            "data": [
            [1411516800000, 40000],
            [1411948800000, 40000],
            [1412553600000, 40000],
            [1413158400000, 40000],
            [1413763200000, 40000],
            [1414368000000, 40000],
            [1414972800000, 40000],
            [1415577600000, 40000],
            [1416182400000, 40000],
            [1416787200000, 40000],
            [1417392000000, 40000],
            [1417996800000, 40000],
            [1418601600000, 40000],
            [1419206400000, 40000],
            [1419379200000, 40000]
        ],
            "color": "#c3df91",
            "fillColor": "#afd46c",
            "marker": {
            "fillColor": "#afd46c"
        }
    }]
};

$("#container").highcharts(ChartData);

Answer 1

您可以使用 tickPositioner 并计算位置。

tickPositioner: function () {
            var positions = [],
                tick = Math.floor(this.dataMin),
                increment = Math.ceil((this.dataMax - this.dataMin) / 6);

            for (tick; tick - increment <= this.dataMax; tick += increment) {
                positions.push(tick);
            }
            return positions;
        },

示例：http://jsfiddle.net/8uqyz1o0/5/

Highcharts x-axis 标签未超出界限

Highcharts x-axis labels not starting on bounds

javascript

jquery

highcharts