Моя круговая диаграмма (chartJs) не появляется

у меня есть небольшая проблема с диаграммой JSМоя круговая диаграмма (chartJs) не появляется

Я хочу, чтобы нарисовать круговую диаграмму, но страница остается пустой, когда я referch это

мой код выглядит следующим образом , у меня есть сомнения с онлайн ГКЗ тег сценария:

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>C.H.A.R.T.JS</title> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
 
</head> 
 

 
<body> 
 
<canvas id="myChart" width="400" height="400"></canvas> 
 
<script> 
 
$(function() 
 
{ 
 
//$('body').css({'background':'red'}); 
 
var ctx = $("#myChart").get(0).getContext("2d"); 
 

 
var data = [ 
 
\t \t \t \t { 
 
\t \t \t \t \t value :270, 
 
\t \t \t \t \t color :'Dodgerblue', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed1' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t value :50, 
 
\t \t \t \t \t color :'Red', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed2' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t value :40, 
 
\t \t \t \t \t color :'yellow', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed3' 
 
\t \t \t \t } 
 
\t \t ]; 
 
var pieChart = new Chart(ctx).Pie(data); 
 
}); // fin jQuery 
 

 

 
</script> 
 

 
</body> 
 
</html>

спасибо заранее

источник

2016-08-31 iMed

Я думаю, что ваша структура данных используется диаграммойJS1, но ваш CDN является chartJS2.
Вот почему вы получили только сообщение об ошибке.

var ctx = $("#myChart").get(0).getContext("2d"); 

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#4BC0C0", 
       "#FFCE56" 
      ], 
      label: 'My dataset' 
     }] 
}; 
var myPieChart = new Chart(ctx,{ 
    type: 'pie', 
    data: data, 
});

источник

2016-08-31 11:21:02 Anami

большое спасибо ... он работает сейчас! =) – iMed

, но как я могу сделать его меньше? он слишком большой ... CSS? – iMed

@ user5080818 вы можете контролировать, является ли он отзывчивым или нет с 'options: {responsive: false}'. Вы можете передать это так: data: data, options: {responsive: false} '. Он реагирует по умолчанию, заполняя его родительский контейнер. Вы можете установить родительский контейнер с максимальной шириной или предопределенной шириной/высотой. Или вы можете сделать что-то вроде '#myChart {max-width: 400px;}'. При максимальной ширине он будет оставаться отзывчивым, если родительский контейнер меньше. – user3366016

Попробуйте создать диаграмму с этой структурой, показанной в документах.

Похоже, что ваша структура немного отличается от документов. http://www.chartjs.org/docs/#doughnut-pie-chart

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

// For a pie chart 
var myPieChart = new Chart(ctx,{ 
    type: 'pie', 
    data: data, 
    options: options 
});` 

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ] 
     }] 
};

Это отзывчивым по умолчанию, расширение к нему родителей контейнера. Вы можете установить максимальную ширину родительского контейнера или сам холст, который будет реагировать на меньшие экраны.

<style type="text/css"> 
    #myChart { 
     max-width: 400; 
    } 
</style>

Если вы не хотите, чтобы это было отзывно, вы могли бы установить эту опцию в false.

options: {responsive: false}

источник

2016-08-31 11:16:24 user3366016

Спасибо за ответы Я буду следовать вашей ссылке ... спасибо – iMed

еще раз спасибо ... для CSS я должен был добавить 400 точек, чтобы заставить его работать , но я предпочитаю это: options: {responsive: false} – iMed

благодарит всех! моя проблема решена =) – iMed

Моя круговая диаграмма (chartJs) не появляется

ответ

Смежные вопросы