无法在 HighCharts 中正确定位工具提示内容

Question

我正在使用 HighCharts 组合图表来比较预测值（以线表示）和累积值（以列表示）。累计值每周都在增加，我想看看它是否达到了预测的预测值。

我在这个 js fiddle, http://jsfiddle.net/aroauy4t/ 中创建了一个图表。我已经在下面显示了js代码。

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Forecast Vs Cumulative chart'
        },
        xAxis: {
            categories: [' ', ' ', 'Bananas', ' ', ' ']
        },
        labels: {
            items: [{
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Cumulative',
            data: [0, 0, 5, 0, 0]
        }, {
            type: 'line',
            name: 'Forecast',
            data: [3, 3, 3, 3, 3],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }]
    });
});

但是当 x 轴不包含如下图所示的标签时，工具提示内容会溢出。

如何让工具提示在没有任何溢出的情况下运行（如下图所示）

Answer 1

我通过在你的 js 中使用以下内容来让它工作（我不太了解 HighCharts）fiddle:

categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]

00A0 是不间断的 unicode 字符 space。

也许它对你有用。

Answer 2

您也可以使用 tooltip - useHTML 属性。启用时，工具提示呈现为异常。

tooltip: {
    useHTML: true
}

http://jsfiddle.net/aroauy4t/2/

无法在 HighCharts 中正确定位工具提示内容

Unable to correctly position the tooltip content in HighCharts

javascript

charts

highcharts