[Google Charts] Titre apparait comme code-barre

**abel.ludba** · 25/10/2013, 02h10

Bonjour
Au travail on est passé de Win XP à Win 7. Nous utilisions toujours IE8. Dans cette nouvelle configuration, je commence à avoir des problemes avec l'affichage du titre de Google Charts: en pièce jointe comment parait dans mon le tire d'un grpahe. Voici le code que j'ai pris sur le site de Google

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
 
        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Est ce que vous pourriez aider?
Merci
Abel

**NoSmoking** · 25/10/2013, 12h56

Bonjour,
les anciennes version de IE "ont tendance" à prendre en compte les polices système ou un truc approchant.
Essaies de définir la police pour ton tracé.

**abel.ludba** · 28/10/2013, 00h25

Salut
J'ai essayé d'ajouter du CSS. J'ai choisi la police Arial et la couler rouge.
Voila comment j'ai fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<html>
  <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
 
        var options = 
          {title: 'My Daily Activities',
		  'titleTextStyle':{'color':'red' , 'fontName': 'Arial',bold:true},
          pieHole: 0.4};
 
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Pour la couleur cela a fonctionné. Mais, la police (ou le problème) c'est toujours la meme chose: code barre.
Merci de votre aide
Abel

**NoSmoking** · 28/10/2013, 18h49

Les anciennes versions de IE travaillent en vml et non en svg, il te faut mettre des guillemets autour du nom de la police

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var options = {
  'title': 'My Daily Activities',
  'titleTextStyle': {
    'color': 'red',
    'fontName': '"Arial"',  // avec guillemets "Arial"
    'bold': true
  },
  'pieHole': 0.4
};

**abel.ludba** · 28/10/2013, 20h18

Bonjour

Cela fonctionne.
Je ne savais cette particularité de IE 8.
Merci beaucoup.
Abel

[Google Charts] Titre apparait comme code-barre

APIs Google

Vue hybride

Discussions similaires

Partager

Partager