HighCharts:多个图表导致多个导出按钮

时间:2016-03-11 10:45:35

标签: javascript charts highcharts

这是我第一次使用 High Charts 库,很棒的东西。

无论如何,我面临一个奇怪的问题,我不明白其背后的原因或如何解决它。

当我在我的页面中显示一个图表时,一旦我在同一页面中添加更多图表,添加的图表有两个导出按钮,一切都很好。 The OSI 7 level

这是我的JS代码:

$(function() {
                Highcharts.setOptions({
                    colors : [ '#e74c3c', '#66b354', '#DDDF00', '#24CBE5',
                            '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
                });

                /* Pie Chart */
                $('#pie-chart-1')
                        .highcharts(
                                {
                                    chart : {
                                        plotBackgroundColor : null,
                                        plotBorderWidth : null,
                                        plotShadow : false
                                    },
                                    title : {
                                        text : '#{msg['DB_graph_title1']}'
                                    },
                                    tooltip : {
                                        pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
                                    },
                                    plotOptions : {
                                        pie : {
                                            allowPointSelect : true,
                                            cursor : 'pointer',
                                            dataLabels : {
                                                enabled : true,
                                                color : '#000000',
                                                connectorColor : '#000000',
                                                format : '<b>{point.name}</b>: {point.percentage:.1f} %'
                                            }
                                        }
                                    },                                      
                                    series : [ {
                                        type : 'pie',
                                        name : 'Etat',
                                        data : [
                                                //'#{msg['DB_graph_ND']}'
                                                [ '#{msg['DB_graph_ND']}',
                                                        #{homeSupBean.nonDemarre} ],
                                                [ '#{msg['DB_graph_CL']}',
                                                        #{homeSupBean.complete} ],
                                                [ '#{msg['DB_graph_EC']}',
                                                        #{homeSupBean.enCours} ], ]
                                    } ]
                                });
            });


            $(function() {
                Highcharts.setOptions({
                    colors : [ '#95ceff', '#66b354', '#DDDF00', '#24CBE5',
                            '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
                });
                $('#container-1')
                        .highcharts(
                                {
                                    chart : {
                                        type : 'column'
                                    },                                      
                                    title : {
                                        text : '#{msg['DB_graph_title2']}'
                                    },
                                    subtitle : {
                                        text : ''
                                    },
                                    xAxis : {
                                        type : 'category',
                                        labels : {
                                            rotation : -45,
                                            style : {
                                                fontSize : '13px',
                                                fontFamily : 'Verdana, sans-serif'
                                            }
                                        }
                                    },
                                    yAxis : {
                                        min : 0,
                                        title : {
                                            text : '#{msg['DB_graph_lib']} (%)'
                                        }
                                    },
                                    legend : {
                                        enabled : false
                                    },

                                    tooltip : {
                                        pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'

                                    },                                      
                                    series : [ {
                                        name : '#{msg['DB_graph_lib']}',
                                        data : [
                                                <ui:repeat value="#{homeSupBean.profils}" var="prfl">[
                                                        '#{prfl.profileName}',
                                                        #{homeSupBean.profilProg[prfl.id.toString()]}],
                                                </ui:repeat> ],
                                        dataLabels : {
                                            enabled : true,
                                            rotation : -90,
                                            color : '#FFFFFF',
                                            align : 'right',
                                            format : '{point.y:.1f}', // one decimal
                                            y : 10, // 10 pixels down from the top
                                            style : {
                                                fontSize : '15px',
                                                fontFamily : 'Verdana, sans-serif'
                                            }
                                        }
                                    } ]
                                });
            });
            $(function() {
                try {
                    Highcharts.setOptions({
                        colors : [ '#95ceff', '#66b354', '#DDDF00',
                                '#24CBE5', '#64E572', '#FF9655', '#FFF263',
                                '#6AF9C4' ]
                    });
                    $('#container-2')
                            .highcharts(
                                    {
                                        chart : {
                                            type : 'column'
                                        },
                                        title : {
                                            text : '#{msg['DB_graph_title3']}'
                                        },
                                        subtitle : {
                                            text : ''
                                        },
                                        xAxis : {
                                            type : 'category',
                                            labels : {
                                                rotation : -45,
                                                style : {
                                                    fontSize : '13px',
                                                    fontFamily : 'Verdana, sans-serif'
                                                }
                                            }
                                        },
                                        yAxis : {
                                            min : 0,
                                            title : {
                                                text : '#{msg['DB_graph_lib']} (%)'
                                            }
                                        },
                                        legend : {
                                            enabled : false
                                        },
                                        tooltip : {
                                            pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
                                        },
                                        series : [ {
                                            name : '#{msg['DB_graph_lib']}',
                                            data : [
                                                    <ui:repeat value="#{homeSupBean.campagnes}" var="camp">[
                                                            '#{camp.name}',
                                                            #{homeSupBean.campagneProg[camp.id.toString()]}],
                                                    </ui:repeat> ],
                                            dataLabels : {
                                                enabled : true,
                                                rotation : -90,
                                                color : '#FFFFFF',
                                                align : 'right',
                                                format : '{point.y:.1f}', // one decimal
                                                y : 10, // 10 pixels down from the top
                                                style : {
                                                    fontSize : '15px',
                                                    fontFamily : 'Verdana, sans-serif'
                                                }
                                            }
                                        } ]
                                    });

                } catch (e) {
                    alert(e.message);
                }

            });
            $(function() {
                try {
                    Highcharts.setOptions({
                        colors : [ '#95ceff', '#66b354', '#DDDF00',
                                '#24CBE5', '#64E572', '#FF9655', '#FFF263',
                                '#6AF9C4' ]
                    });
                    $('#container-3')
                            .highcharts(
                                    {
                                        chart : {
                                            type : 'column'
                                        },
                                        title : {
                                            text : '#{msg['DB_graph_title4']}'
                                        },
                                        subtitle : {
                                            text : ''
                                        },
                                        xAxis : {
                                            type : 'category',
                                            labels : {
                                                rotation : -45,
                                                style : {
                                                    fontSize : '13px',
                                                    fontFamily : 'Verdana, sans-serif'
                                                }
                                            }
                                        },
                                        yAxis : {
                                            min : 0,
                                            title : {
                                                text : '#{msg['DB_graph_lib']} (%)'
                                            }
                                        },
                                        legend : {
                                            enabled : false
                                        },
                                        tooltip : {
                                            pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
                                        },
                                        series : [ {
                                            name : '#{msg['DB_graph_lib']}',
                                            data : [
                                                    <ui:repeat value="#{homeSupBean.sectionsHC}" var="sect">[
                                                            '#{sect.name}',
                                                            #{homeSupBean.sectionProg[sect.id.toString()]}],
                                                    </ui:repeat> ],
                                            dataLabels : {
                                                enabled : true,
                                                rotation : -90,
                                                color : '#FFFFFF',
                                                align : 'right',
                                                format : '{point.y:.1f}', // one decimal
                                                y : 10, // 10 pixels down from the top
                                                style : {
                                                    fontSize : '15px',
                                                    fontFamily : 'Verdana, sans-serif'
                                                }
                                            }
                                        } ]
                                    });
                } catch (e) {
                    alert(e.message);
                }
            });

我试过了:

exporting : {
            buttons : {
               contextButtons : {
                        enabled : false,
                        menuItems : null
                        }
                },
                enabled : true
            },

但没有成功:(,如果有人可以提供帮助,请不要犹豫,谢谢。

0 个答案:

没有答案