2013-11-25 3 views
0

У меня проблема с элементом управления Combo Chart API в IE8. Кажется, я не могу правильно использовать шрифты для диаграммы.Ошибка шрифта Google Combo Chart в IE8

Это моя функция, которая рисует диаграмму: (все шрифты явно называют здесь, я также пытался только установить его на свойстве 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

+0

Добро пожаловать в Переполнение стека. Вы хорошо объясните, что вы сделали, но в чем ваш вопрос? Вы говорите, что не можете получить правильные шрифты, но какова ошибка, которую вы получаете? – Cthulhu

+1

Привет, Cthulhu, спасибо за приветствие! Проблема не является ошибкой, шрифты не отображаются правильно. Хотелось бы, чтобы я мог загрузить изображение, но пока у меня не хватает репутации. Вот ссылка на один, хотя: http://imgur.com/otqlI2m – JMG

+0

Спасибо @cimmanon за добавление изображения – JMG

ответ

0

Я нашел обходной путь на Google Groups. При вводе элемента fontName в элементы управления визуализацией API Google введите значение, заключенное в двойные кавычки, а затем одинарные кавычки. Например: «fontName», это делает его корректно отображаемым в IE8. (Исправлено найдено здесь: https://groups.google.com/forum/#!topic/google-visualization-api/ESS5mDoqrc0)

Google знает об этой проблеме, но не планирует ее исправлять. Это ответ от Google: «Мы сожалеем об этом, но не знаем, что можно сделать. IE < = 8 не поддерживает SVG, поэтому используется VML. Более того, поддержка VML в IE ухудшается, и обработка шрифтов особенно проблематична. IE9, наконец, поддерживает SVG, и я думаю, что это нормально работает, но мы не смогли исправить проблемы для IE < = 8. " (от: https://code.google.com/p/google-visualization-api-issues/issues/detail?id=427)

Смежные вопросы