Форум

Margaret · #1 (**permalink**) 20.04.2015, 17:54

Здравствуйте! Я -новичок. Помогите разместить 2 графика при загрузки страницы. Код такой:
window.onload = function(){

//Лепестковая
window.myRadar = new Chart(document.getElementById("canvas").getContext ("2d")).Radar(radarChartData,{responsive: true
});

// Столбчатая диаграмма

var ctx = document.getElementById("canvas1").getContext("2d" );

window.myBar = new Chart(ctx).Bar(barChartData, {responsive : true});
};
В данном коде рисуется в окне последний график. Это логично. Помогите написать код так, чтобы оба графика рисовались! Заранее благодарю)

рони · #2 (**permalink**) 20.04.2015, 18:31

Сообщение от Margaret

Это логично.

почему логично? что такое Chart? Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 20.04.2015, 18:33

Margaret,
сделайте макет -- ниже это макет, который нужно делать вам чтоб получить быстрее ответ.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
  <script>
      window.onload = function(){
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            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: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


 //Лепестковая
var radarChartData = data;
var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{responsive: true});

 // Столбчатая диаграмма
var barChartData =  data ;
var ctx = document.getElementById("canvas1").getContext("2d");
 var myBar = new Chart(ctx).Bar(barChartData, {responsive : true});
 };
  </script>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <canvas id="canvas1" width="400" height="400"></canvas>
</body>

</html>

рони · #4 (**permalink**) 20.04.2015, 18:52

Margaret,

<!doctype html>

 <html>

 <head>

 <title>Bar Chart</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script>
 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 radarChartData = {
 labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

 datasets: [
 {
 label: "My First dataset",
 fillColor: "rgba(220,220,220,0.2)",
 strokeColor: "rgba(220,220,220,1)",
 pointColor: "rgba(220,220,220,1)",pointStrokeColor: "#fff",

 pointHighlightFill: "#fff",pointHighlightStroke: "rgba(220,220,220,1)",
 data: [65,59,90,81,56,55,40]
 },

 {
 label: "My Second dataset",
 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: [28,48,40,19,96,27,100]}
 ]
 };


 window.onload = function(){

 var ctx = document.getElementById("canvas").getContext("2d") ;

var myBar = new Chart(ctx).Bar(barChartData, {
 responsive : true
 });
myBar.
 window.myRadar = new Chart(document.getElementById("canvas1").getContext("2d")).Radar(radarChartData,{responsive: true });
}
 </script>
 </head>

 <body>

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

 </div>
  <div style="width:30%">

 <canvas id="canvas1" height="450" width="450"></canvas>

 </div>



 </body>

 </html>

Margaret · #5 (**permalink**) 20.04.2015, 18:54

Спасибо! Сейчас пробую, у меня просто на странице много графиков с различных библиотек.

Форум

Справочник

Discord чат

Курсы javascript