IE에서 두 개의 차트 표시

Chrome 및 FF에서 작동하는 동안 IE에서 2 개의 차트를 표시 할 수 없습니다. 하나의 차트 만 표시됩니다. 여기 내 코드 :IE에서 두 개의 차트 표시

function pie() {  
$('#pie_projet').highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    }, 
    title: { 
     text: 'Nombre de projet ANRU par communes' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.y}</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       connectorColor: '#000000', 
       style: { 
        fontSize: '8px', 
        color: 'black' 
       }, 
       format: '<b>{point.name}</b>: {point.y}'      
      } 
     }   
    }, 
    colors: [<?php echo join($tabSliceColor,',') ?>], 
    series: [{ 
     type: 'pie', 
     name: 'Nb projet', 
     //document.getElementsByName(data_pie)[0].value 
     data: [<?php echo join($data_pie, ',') ?>] 
    }] 

}); 
}; 

function groupBar() { 
$('#bar_projet').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Nombre d\'opérations par année et par type d opérations ANRU' 
    }, 
    subtitle: { 
     text: 'Source: Valenciennes Métropole' 
    }, 
    xAxis: { 
     categories: [<?php echo join($legend_bar,',') ?>], 
     title: { 
      text: null 
     }, 
     labels: { 
      rotation: -45, 
      style: { 
       fontSize: '9px' 
      } 
     } 
    }, 
    yAxis: [{ 
     min: 0, 
     max: 200, 
     labels: { 
      style: { 
       color: 'red' 
      } 
     }, 
     title: { 
      text: 'Nombre total d\'opérations', 
      align: 'middle' 
     }, 
     labels: { 
      overflow: 'justify' 
     },     
     opposite: true 
    }, 
    // second yAxis 
    { 
     min: 0, 
     max: 10, 
     labels:{ 
      style :{ 
       color: 'red' 
      } 
     }, 
     title: { 
      text: 'Nombre d\'opérations', 
      align: 'middle' 
     }, 
     labels: { 
      overflow: 'justify' 
     } 
    }], 
    tooltip: { 
     valueSuffix: ' opérations' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     verticalAlign: 'top', 
     x: 50, 
     y: 60, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: '#FFFFFF', 
     shadow: true, 
     itemStyle: { 
      color: 'black', 
      fontSize: '7px' 
     } 
    }, 
    colors: [<?php echo join($tabOpColor,',') ?>], 
    plotOptions: { 
     series: { 
      animation: false 
     }, 
     spline: { 
       dataLabels: { 
        enabled: true, 
        crop : false // permet de ne pas bloquer l'affichage d'un label si hot 
       } 
     } 
    }, 
    series: [<?php echo join($series_bar,',') ?>,<?php echo $line_data?>]  
});

}};

나는 다음과 같은 2 fonctions 전화 :

<BODY onLoad ='pie();groupBar();'>

차트는 DIV에 배치됩니다 : IE와

<div id='bar_projet' style='min-width: 400px; height: 400px; margin: 0 auto'></div> 
<div id='pie_projet' style='min-width: 400px; height: 400px; margin: 0 auto'></div>

가 난 단지 하나 개의 차트, 두 번째와 크롬과 FF I과 참조 둘 다 보아라.

도움 주셔서 감사합니다.

출처

2013-09-27 archipelago

콘솔에서 오류를 확인하십시오. – wergeld

데이터가 어떻게 보이나요? 어떤 오류? 이 예제를 하드 코드 된 데이터로 jsfiddle로 준비 할 수 있습니까? –

body onLoad 대신 jquery를 사용하여로드시 초기화를 시도 했습니까?

$(function() { 
    pie(); 
    groupBar(); 
}

출처

2013-09-27 13:20:27 SteveP

예 시도했지만 동일합니다. 나는 IE 10을 가진 다른 컴퓨터에서 시험해 보았다. 그래서 IE 9에서 작동하지 않는 이유를 모르겠습니다. – archipelago

이 문제는 IE에서만 발생하며 다른 브라우저에서는 나타나지 않습니다. ??? 인스펙터를 사용하면 실수로 반복하는 차트 (예 :로드 ID의 ID 확인)와 연결된 태그의 ID를 확인합니다.

2 개의 태그가 동일한 ID를 가지고있을 때 IE가 작동하지 않기 때문입니다.

희망 하시겠습니까?

출처

2013-09-27 13:25:21

도움을 주셔서 감사합니다 ... 그래서 미쳤습니다! IE 10을 사용하는 다른 컴퓨터에서 시도했지만 작동하고 여전히 IE 9가 설치된 컴퓨터에서 작동하지 않습니다. loadind div id는 동일한 ID가 아닙니다! – archipelago

IE에서 두 개의 차트 표시

답변

관련 문제