Создать динамическую диаграмму с chart.js

Я использую плагин jQuery Chart.js для создания гистограммы. Я могу создать статическую диаграмму, но я хочу создать динамическую диаграмму. Я хочу нарисовать диаграмму из данных, которые читаются из таблицы html. Как установить динамический набор данных в диаграмму chart.js.Создать динамическую диаграмму с chart.js

Это мой код.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Bar Chart</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <script src="js/Chart.js"></script> 
</head> 
<body> 

    <div style="width:50%;"> 
     <canvas id="canvas_bar"></canvas> 
    </div> 

    <div class="dataset"> 
     <table> 
      <tr> 
       <th>Year</th> 
       <th>Income</th> 
       <th>Expenditure</th> 
       <th>Profit/Loss<th> 
      </tr> 
      <tr> 
       <td>2012</td> 
       <td>10000</td> 
       <td>5000</td> 
       <td>5000</td> 
      </tr> 
      <tr> 
       <td>2013</td> 
       <td>11500</td> 
       <td>7500</td> 
       <td>4000</td> 
      </tr> 
      <tr> 
       <td>2014</td> 
       <td>9800</td> 
       <td>4700</td> 
       <td>5100</td> 
      </tr> 
     <table> 
    <div> 



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

     var barChartData = { 
      labels : ["2012","2013","2014"], 
      datasets : [ 
       { 
        fillColor : "rgba(95,137,250,0.5)", 
        strokeColor : "rgba(95,137,250,0.9)", 
        highlightFill: "rgba(95,137,250,0.75)", 
        highlightStroke: "rgba(95,137,250,1)", 
        data : [10000,11500,9800] 
       }, 
       { 
        fillColor : "rgba(245,75,75,0.5)", 
        strokeColor : "rgba(245,75,75,0.8)", 
        highlightFill : "rgba(245,75,75,0.75)", 
        highlightStroke : "rgba(245,75,75,1)", 
        data : [5000,7500,4700] 
       }, 
       { 
        fillColor : "rgba(98,223,114,0.5)", 
        strokeColor : "rgba(98,223,114,0.8)", 
        highlightFill : "rgba(98,223,114,0.75)", 
        highlightStroke : "rgba(98,223,114,1)", 
        data : [5000,4000,5100] 
       } 
      ] 

     }; 
     window.onload = function(){ 
      var ctx = document.getElementById("canvas_bar").getContext("2d"); 
      window.myBar = new Chart(ctx).Bar(barChartData, { 
       responsive : true 
      }); 
     } 
</script> 
</body> 
</html>

источник

2014-10-23 Daybreaker

вы можете извлечь значения из таблицы с помощью функции JQuery текста(), путем создания правильной структуры данных для chart.js вы можете генерировать данные диаграммы динамически из таблицы.

Прежде всего, вам нужно извлечь ярлыки из таблицы. вы можете выбирать строки и, итерируя каждую строку, вы можете получить данные метки из первых столбцов.

function generateLabelsFromTable() 
{      
    var labels = []; 

    var rows = jQuery("tr"); 
    rows.each(function(index){ 
     if (index != 0) // we dont need first row of table 
     { 
      var cols = $(this).find("td");  
      labels.push(cols.first().text());       
     } 
    }); 
    return labels; 
}

Аналогичным образом вы можете генерировать данные диаграммы путем итерации таблицы html.

function generateDataSetsFromTable() 
{ 
    var data; 
    var datasets = []; 
    var rows = jQuery("tr"); 
    rows.each(function(index){ 
     if (index != 0) // we dont need first row of table 
     { 
      var cols = $(this).find("td"); 
      var data = []; 
      cols.each(function(innerIndex){ 
       if (innerIndex!=0) // we dont need first columns of the row     
        data.push($(this).text());           
      }); 


      var dataset = 
      { 
       fillColor : colors[index%3].fillColor, 
       strokeColor : colors[index%3].strokeColor, 
       highlightFill: colors[index%3].highlightFill, 
       highlightStroke: colors[index%3].highlightStroke, 
       data : data 
      } 

      datasets.push(dataset); 

     } 
    }); 
    return datasets; 
}

После написания этой функции, вы можете изменить ваши barChartData как этот

var barChartData = { 
    labels : generateLabelsFromTable(), 
    datasets : generateDataSetsFromTable() 
};

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

var colors = []; 
colors.push(      
{ 
     fillColor : "rgba(95,137,250,0.5)", 
     strokeColor : "rgba(95,137,250,0.9)", 
     highlightFill: "rgba(95,137,250,0.75)", 
     highlightStroke: "rgba(95,137,250,1)" 
}); 
colors.push(      
{ 
     fillColor : "rgba(245,75,75,0.5)", 
     strokeColor : "rgba(245,75,75,0.8)", 
     highlightFill : "rgba(245,75,75,0.75)", 
     highlightStroke : "rgba(245,75,75,1)" 
}); 
colors.push(      
{ 
     fillColor : "rgba(98,223,114,0.5)", 
     strokeColor : "rgba(98,223,114,0.8)", 
     highlightFill : "rgba(98,223,114,0.75)", 
     highlightStroke : "rgba(98,223,114,1)", 
});

Не забудьте включить jquery.

FIDDLE

источник

2014-10-23 05:46:13

Большое вам спасибо. Ты спас свой день. Еще раз спасибо. – Daybreaker

Все ответы уже на этой странице для ChartJs предыдущей версии, в которой метод создания диаграммы полностью отличается

Предыдущая версия

new Chart(ctx).Bar(barChartData, { 
      responsive : true 
     });

Новая версия

new Chart(ctx,{ 
        type: 'doughnut' 
       });

Если вы хотите создать динамическую диаграмму для новой версии, тогда просто добавьте convas в любой контейнер, который вы хотите, а затем метод диаграммы вызова. Полный код:

$('#pieChartContainer').html(''); 
     $('<canvas id="pieChart"></canvas>').appendTo($("#pieChartContainer")); 
       data1={}; 
       data1.labels=["M", "T", "W", "T", "F", "S", "S"]; 
       data1.datasets=[ 
       {backgroundColor:["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e"],data: [12, 19, 3, 17, 28, 24, 7]} 
       ]; 

      var ctx = $("#pieChart").get(0).getContext("2d"); 
       var myChart = new Chart(ctx, { 
        type: 'doughnut', 
        data: data1 
       });

источник

2017-05-23 12:00:12

Создать динамическую диаграмму с chart.js

ответ

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