Question

我在IE8中遇到了Google API的Combo Chart控件的问题。我似乎无法使图表的字体正确。

这是我绘制图表的函数:(这里显式调用了所有字体，我也试图只在iframe属性上设置它（仅在IE8中使用））

    function drawChart() {
        var options = {
            fontName: 'Arial',
            slantedText: false,
            titleTextStyle: { fontName: 'Arial', slantedText: false },
            title: 'PLMs for Period',
            tooltip: { textStyle: { fontName: 'Arial', italic: false, fontSize: 24} },
            vAxis: { title: '# of PLM\'s', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
            hAxis: { title: 'Plant Location', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
            seriesType: "bars",
            series: { 5: { type: "line"} },
            backgroundColor: '#F2F2F2',
            titleTextStyle: { fontSize: '28' }
        };
        var arrayTable = google.visualization.arrayToDataTable(chartData);
        var chart = new google.visualization.ComboChart(document.getElementById('chart-container'));
        chart.draw(arrayTable, options);
    }

以下是相关的HTML代码：

    <div id="report-container">
        <h3 id="period-information"></h3>
        <div id="report-content">
            <h3 id="InProgressStart-header"></h3>
            <div class="accordion-content" id="InProgressStart-content">
            </div>
            <h3 id="Launched-header"></h3>
            <div class="accordion-content" id="Launched-content">
            </div>
            <h3 id="Completed-header"></h3>
            <div class="accordion-content" id="Completed-content">
            </div>
            <h3 id="InProgressEnd-header"></h3>
            <div class="accordion-content" id="InProgressEnd-content">
            </div>
            <h3 id="Rejected-header"></h3>
            <div class="accordion-content" id="Rejected-content">
            </div>
        </div>
        <center><div id="chart-container" style="width: 100%; height: 500px;"></div></center>
    </div>

以下是传入数据的示例：

    [
        ["Plant Location", "In Progress at Start", "Launched", "Completed", "In Progress at End", "Fully Rejected"],
        ["Example 1", 17, 6, 8, 15, 1],
        ["Example 2", 19, 5, 8, 14, 2],
        ["Example 3", 12, 6, 3, 14, 1]
    ]

以下是涉及字体的样式：

    iframe
    {
        font-family: "Arial, sans-serif";   
    }
    body {
        color: #333;
        font-size: 16px;
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        padding: 20px;
        margin: 0  auto;
        height: auto;
        max-width: 1200px;
        min-width: 500px;
        background: #F2F2F2;
    }

如果您需要更多信息，请与我们联系。我自己做了一些研究，发现IE依赖于操作系统的字体，但它仍然应该正确呈现'Arial'。

enter image description here

Answer 1

我在Google网上论坛找到了解决方法。将fontName输入Google API Visualization控件时，请输入用双引号括起来的值，然后输入单引号。像这样：＆＃39;＆＃34; fontName＆＃34;＆＃39;，这使它在IE8中正确呈现。（在此处找到修复：https://groups.google.com/forum/#!topic/google-visualization-api/ESS5mDoqrc0）

Google确实知道这个问题，但并不打算修复它。这是Google的回复：＆＃34;我们很抱歉，但不知道可以做些什么。 IE＆lt; = 8不支持SVG，因此使用VML。此外，IE中的VML支持正在恶化，字体处理尤其成问题。 IE9最终支持SVG，我认为这样可以正常工作，但我们无法解决IE＆lt; = 8的问题。＆＃34; （来自：https://code.google.com/p/google-visualization-api-issues/issues/detail?id=427）

IE8中的Google API组合图字体问题

1 个答案: