使用 IE 显示两个图表

display two charts with IE

本文关键字：两个 IE 显示 使用      更新时间：2023-09-26

当IE与Chrome和FF一起使用时，我无法显示2个图表。仅显示一个图表。这是我的代码：

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 中：

<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>
使用IE，我

只看到一个图表，第二个图表，而使用Chrome和FF我可以看到它们。

感谢您的帮助！

您是否尝试过使用 jquery 而不是在正文 onLoad 中初始化它？

$(function () {
    pie();
    groupBar();
}
此问题

仅在IE中发生，而不会发生在任何其他浏览器权限中???使用检查器检查与您的图表关联的标签的 id，它们可能会重复（例如检查您的加载div 的 id），这是我通常犯错误的地方。

这是因为当两个标签具有相同的 id 时，IE 会发疯。

希望对你有帮助

相关文章：