Question

我已经获得了一些http://canvasjs.com/javascript-charts/的图表，他们真是太棒了！我使用了其中一个并且效果很好：

            <script type="text/javascript">
                google.charts.load("current", {packages: ["corechart"]});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['ip', 'quantity'],
                            @foreach($ipsWithBytesDates as $item)
                        ['{{$item['ip']}}', {{$item['counts']}}],
                        @endforeach
                        ]);

                    var options = {
                        title: 'My Daily Activities',
                        is3D: true,
                    };

                    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
                    chart.draw(data, options);
                }
            </script>
            <div id="piechart_3d" style="width: 700px; height: 350px;"></div>

现在我需要第二张图表 - 我已经从网站上获得了它并复制＆amp;将它粘贴在我的代码中..但这个避风港的工作方式与我想的一样..第二张图表有效，但会覆盖整个第一张图表。

第一个图表是一个柱形图，位于我的页面顶部..第二个图表应该在底部..但它不是，它每次都会覆盖我的第一个图表 - 任何人都可以告诉我为什么？我认为这是因为＆＃34; window.onload＆＃34;在两个图表的开头..但我还没有真正使用javascript。

第二张图表：

                                <script type="text/javascript">
                    window.onload = function () {
                        var secchart = new CanvasJS.Chart("chartContainer2",
                                {
                                    title:{
                                        text: "U.S Smartphone OS Market Share, Q3 2012",
                                        fontFamily: "Impact",
                                        fontWeight: "normal"
                                    },

                                    legend:{
                                        verticalAlign: "bottom",
                                        horizontalAlign: "center"
                                    },
                                    data: [
                                        {
                                            //startAngle: 45,
                                            indexLabelFontSize: 20,
                                            indexLabelFontFamily: "Garamond",
                                            indexLabelFontColor: "darkgrey",
                                            indexLabelLineColor: "darkgrey",
                                            indexLabelPlacement: "outside",
                                            type: "doughnut",
                                            showInLegend: true,
                                            dataPoints: [
                                                {  y: 53.37, legendText:"Android 53%", indexLabel: "Android 53%" },
                                                {  y: 35.0, legendText:"iOS 35%", indexLabel: "Apple iOS 35%" },
                                                {  y: 7, legendText:"Blackberry 7%", indexLabel: "Blackberry 7%" },
                                                {  y: 2, legendText:"Windows 2%", indexLabel: "Windows Phone 2%" },
                                                {  y: 5, legendText:"Others 5%", indexLabel: "Others 5%" }
                                            ]
                                        }
                                    ]
                                });
                        secchart.render();
                    }
                </script>
                <script type="text/javascript"></script>
            <div id="chartContainer2" style="height: 300px; width: 100%;"></div>

来自chartlibary的

源代码：

Answer 1

每个图表都需要有单独的容器。您粘贴的每个代码段都使用var chart = new CanvasJS.Chart("chartContainer",

尝试将第二个图表设置为使用页面上的其他元素。

<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>

var chart = new CanvasJS.Chart("chartContainer1", ...
var chart = new CanvasJS.Chart("chartContainer2", ...

Answer 2

看起来这两个图表都在名为＆＃34; chartContainer＆＃34;的元素中呈现。在两个代码片段中，底部都有一个带有此名称的div。您应该至少为其中一个图表更改此div的名称。

为什么这个Javascript图表不会工作两次？

2 个答案: