这是我正在使用的条形图,这是带有数据的代码:
在这段代码中,我在工具提示中显示了更多数据,但是问题是一些数据显示在工具提示中,而其余数据没有显示在工具提示中:

这是Google chrome中的屏幕截图,仅一行包含完整的数据格式:

<!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>


这是Internet Explorer中带有不规则数据的屏幕快照,该数据显示IE10和IE8中的数据不完整,mozilla也显示如下:
   

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



这是在IE10中,请检查:

这是在Mozilla中:请检查:



请帮忙

谢谢,

最佳答案

问题在于在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:
屏幕截图:

关于javascript - Highcharts 图表工具提示在IE10和IE8和Mozilla中不支持更多数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25862722/

10-09 15:37
查看更多