wake-up-neo.com

mehrere Diagramme auf derselben Seite

hallo, ich habe versucht Chartjs zu verwenden. __ finden Sie in diesem Link www.chartjs.org

ich habe versucht, zwei Diagramme auf derselben Seite mit dem Beispielcode zu zeichnen

ich habe zwei verschiedene Div mit zwei verschiedenen IDs erstellt

so was 

<div id="chart1"></div>
<div id="chart2"></div>

dann, nachdem diese Zeile eingefügt wurde:

ich habe das erste Diagramm folgendermaßen erstellt:

 window.onload = function(){
    var ctx1 = document.getElementById("chart1").getContext("2d");
    window.myLine = new Chart(ctx1).Line(lineChartData, {
        responsive: true
    });
}

und das zweite Diagramm auf diese Weise:

   window.onload = function(){
        var ctx2 = document.getElementById("chart2").getContext("2d");
        window.myPie = new Chart(ctx2).Pie(pieData);
    };

daten, die für beide Diagramme verwendet werden, sind mit Samples identisch, es hat sich also nichts geändert Wenn ich jedoch nur ein Diagramm selbst zeichne, funktioniert es hervorragend Wenn ich die beiden Diagramme gleichzeitig setze, bekomme ich nur das Tortendiagramm 

kannst du mir sagen, wo ist das Problem bitte? Ich glaube, es ist eine Art Konflikt, aber ich kann es nicht finden

15
user3388314

Verwenden Sie nur ein window.onload

window.onload = function () {
        window.myRadar = new Chart(document.getElementById("canvas1").getContext("2d")).Radar(radarChartData, {
            responsive: true
        });
        var G2 = document.getElementById("canvas2").getContext("2d");
        window.myBar = new Chart(G2).Bar(barChartData, {
            responsive: true
        });
    }
18

Ich habe nicht an verschiedenen Arten von Diagrammen gearbeitet, aber ich habe an einem Beispiel gearbeitet und zwei Balkendiagramme auf einer Seite erstellt, die diesen Code verwenden:

<div style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

<div style="width: 50%">
    <canvas id="canvas2" height="450" width="600"></canvas>
</div>

und im Drehbuch gefällt mir das:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
    var barChartData2 = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
    var ctx2 = document.getElementById("canvas2").getContext("2d");
    window.myBar = new Chart(ctx2).Bar(barChartData2, {
        responsive : true
    });
}
3
MAli Fahimi

Zunächst benötigen Sie nur ein window.onload -Ereignis. Kein Grund, zwei getrennte Fälle davon zu haben. 

Zweitens sind die Datensätze für Kreisdiagramm und Liniendiagramm tatsächlich sehr unterschiedlich. 

Kreisdiagramm-Beispieldaten:

        self.pieData=  [
        {
            value: 65,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "New Scenarios"
        },
        {
            value: 297,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Responses Submitted"
        },
        {
            value: 225,
            color: "#64a789",
            highlight: "#5AD3D1",
            label: "Responses Graded"
        }

    ]

Liniendiagramm-Beispieldaten:

self.lineData= {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "New Tests",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "#64a789",
            pointColor: "#64a789",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Responses",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [128, 148, 140, 119, 186, 127, 190]
        },
        {
            label: "Responses Graded",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "#41e498",
            pointColor: "#41e498",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [108, 116, 120, 112, 136, 121, 111]
        }
    ]
};

Das Liniendiagramm wird wahrscheinlich nicht initialisiert, weil Sie falsche Daten eingeben. 

3
Phil

Verwenden Sie nur 1 window.onload

function myfunc1{
}
function myfunc2{
}
function start(){
myfunc1();
myfunc1();
}
window.onload = start(); 

Ref: http://www.htmlgoodies.com/beyond/javascript/article.php/3724571/Verwendung mehrerer-JavaScript-Onload-Functions.htm

1
Ananda

Ich versuche diesen Code ... damit lösen Sie Ihr Problem 

 var barChartData = {
            labels: [<?php echo $str_indiv_value; ?>],
            datasets: [{
                label: 'Dataset 1',
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple,
                    window.chartColors.red
                ],
                yAxisID: 'y-axis-1',
                data: [
                   <?php echo $str_indiv_requred;?>
                ]
            }]

        };

        var barChartData_2 = {
            labels: [<?php echo $str_indiv_value; ?>],
            datasets: [{
                label: 'Dataset 1',
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple,
                    window.chartColors.red
                ],
                yAxisID: 'y-axis-1',
                data: [
                    <?php echo $str_indiv_requred;?>
                ]
            }]

        };


        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Multi Axis'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }],
                    }
                }
            });




            var ctx_2 = document.getElementById('canvas2').getContext('2d');
            window.myBar = new Chart(ctx_2, {
                type: 'bar',
                data: barChartData_2,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Multi Axis'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }],
                    }
                }
            });



        };
0
DeVYaGhI