Question

我尝试在一个页面中使用两个类似的javascript，我已经区分了他们的ID名称但是当我运行我的应用程序时，它始终是第一个声明的脚本，只有在第二个没有的情况下才会工作＃39 ;吨。示例：

<script type="text/javascript">
            $(function () {

                // Radialize the colors
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                });

                // Build the chart
                $('#view2').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                },
                                connectorColor: 'silver'
                            }
                        }
                    },
                    series: [{
                            type: 'pie',
                            name: 'Persentase',
                            data: [['Perempuan', 70],
                                ['Laki -Laki', 30]



                            ]
                        }]
                });
            });
        </script>;
<script type="text/javascript">
            $(function () {

                // Radialize the colors
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                });

                // Build the chart
                $('#view1').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                },
                                connectorColor: 'silver'
                            }
                        }
                    },
                    series: [{
                            type: 'pie',
                            name: 'Persentas',
                            data: [['Perempuan', 50],
                                ['Laki -Laki', 50]



                            ]
                        }]
                });
            });
        </script>

上面的代码只执行第一个声明的脚本（＃view2），而第二个（＃view1）不起作用。我不知道这是什么问题，如果你能帮忙，谢谢你。

有关详细信息，我尝试在同一页面中调用它们，如：

<div class="row-fluid">
                        <div class="span6" onTablet="span6" onDesktop="span6">
                            <div id="view1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        </div>
                        <div class="span6" onTablet="span6" onDesktop="span6">
                            <div id="view2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div><!--/span-->

Answer 1

从第二个脚本中删除此代码：

//径向化颜色

            Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                return {
                    radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            });

另外，你有“;”在第一个关闭脚本标记之后，它将导致它显示在页面上。

此外，您可以将＃view1代码放入与＃view2相同的脚本块中，以使其更紧凑。

在一个页面中执行两个类似的JavaScript？

1 个答案: