使用chart.js創建動態圖表

Question

我正在使用Chart.js jquery插件來創建條形圖。 我可以創建靜態圖表，但我想創建一個動態圖表。 我想從從html表中讀取的數據中繪制圖表。 如何將動態數據集設置為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>

Answer 1

您可以使用jquery text（）函數從表中提取值，通過為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。

小提琴

Answer 2

本頁提到的所有答案都適用於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
                 });

使用chart.js創建動態圖表

問題描述

2 個解決方案

解決方案1
7 已采納 2014-10-23 05:46:13

解決方案2
1 2017-05-23 12:00:12

使用chart.js創建動態圖表

問題描述

2 個解決方案

解決方案1 7 已采納 2014-10-23 05:46:13

解決方案2 1 2017-05-23 12:00:12

解決方案1
7 已采納 2014-10-23 05:46:13

解決方案2
1 2017-05-23 12:00:12