Question

这是我正在使用的条形图，这里是带数据的代码：在此代码中，我有更多数据显示在工具提示中，但问题是工具提示中显示了一些数据，而其余数据未显示在工具提示中：

这是谷歌浏览器中的屏幕截图显示，只有一行完整的数据格式： enter image description here

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Network Availaibility (Without Exclusions) - %',
                    'Network Availaibility (Without Exclusions) - %',
                    'Network Availaibility (Without Exclusions) - %',
                    'Network Availaibility (Without Exclusions) - %'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '13-Jan',
                data: [49.9, 71.5, 106.4]

            }, {
                name: '13-Feb',
                data: [83.6, 78.8, 98.5]

            }, {
                name: '13-Mar',
                data: [48.9, 38.8, 39.3]

            }, {
                name: '13-Apr',
                data: [42.4, 33.2, 34.5]

            },
            {
                name: '13-May',
                data: [49.9, 71.5, 106.4]

            }, {
                name: '13-Jul',
                data: [83.6, 78.8, 98.5]

            }, {
                name: '13-Aug',
                data: [48.9, 38.8, 39.3]

            }, {
                name: '13-Sep',
                data: [42.4, 33.2, 34.5]

            },
            {
                name: '13-Oct',
                data: [42.4, 33.2, 34.5]

            },
            {
                name: '13-Nov',
                data: [49.9, 71.5, 106.4]

            }, {
                name: '13-Dec',
                data: [83.6, 78.8, 98.5]

            },{
                name: '14-Jan',
                data: [49.9, 71.5, 106.4]

            }, {
                name: '14-Feb',
                data: [83.6, 78.8, 98.5]

            }, {
                name: '14-Mar',
                data: [48.9, 38.8, 39.3]

            }, {
                name: '14-Apr',
                data: [42.4, 33.2, 34.5]

            },
            {
                name: '14-May',
                data: [49.9, 71.5, 106.4]

            }, {
                name: '14-Jul',
                data: [83.6, 78.8, 98.5]

            }, {
                name: '14-Aug',
                data: [48.9, 38.8, 39.3]

            }
            ]
        });
    });


        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

这是互联网浏览器中的屏幕截图，其中包含不规则数据，显示 IE10 和 IE8 以及 mozilla 中的不完整数据： enter image description here

这是js小提琴链接请加载 mozilla 和 ie10 ：http://jsfiddle.net/2pv3tpmd/1/

enter image description here

这是在IE10中，请检查：

这是在Mozilla：请检查：

enter image description here

请帮忙

谢谢，

Answer 1

试试这个：

      tooltip: {
        headerFormat: '{point.key}<table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

如果这不起作用，请尝试通过按住ctrl键并向下滚动来缩小浏览器窗口（以防万一解决问题）

Answer 2

问题在于IE8中的渲染表，只需设置样式：white-space:nowrap，如下所示：

        pointFormat: '<tr style="white-space:nowrap"><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',

并演示：http://jsfiddle.net/2pv3tpmd/6/

关于Firefox（？） - 对我来说很好，用v32测试

修改截图：

编辑2： 截图：

高图表工具提示在IE10和IE8以及Mozilla中不支持更多数据

2 个答案: