顯示許多圖表具有相同源的JavaScript的數據（地圖（鍵，值））

我有地圖上這種形式顯示許多圖表具有相同源的JavaScript的數據（地圖（鍵，值））

Object{485:Array[4],2072:Array[4],9665:Array[3]...}

我想顯示每個鍵的圖表的。

我有一個例子是類似我正在尋找我試圖在許多圖表，顯示了我的價值觀：在這個例子中，我的關鍵是：car_id

第一步：排序我的陣列來獲得我的鑰匙地圖。它工作正常。但第二個不工作...我想顯示一個基於car_id和每個面板bootstrap每個數據的圖表... 我做錯了什麼？

謝謝

<html > 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
</head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script> 



<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script> 

<body > 
    <div > 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel heading without title</div> 
      <div class="panel-body"> 
       <canvas id="myChart" width="400" height="400"></canvas> 
      </div> 
     </div> 
    </div> 
</body> 
<script>var json = { 
    'cars': [{ 
     "car_id": "1", 
     "price": "925", 
     "full_option": "EEEE" 
     }, { 
     "car_id": "1", 
     "price": "990", 
     "full_option": "DDDDD" 
     }, { 
     "car_id": "2", 
     "price": "500", 
     "full_option": "FFF" 
     }, { 
     "car_id": "2", 
     "price": "900", 
     "full_option": "GGGGGGG" 
     }, { 
     "car_id": "4", 
     "price": "900", 
     "full_option": "JJJ" 
    }] 
}; 


var car_array = json.cars.reduce((prev, t, index, arr) => { 
    if (typeof prev[t.car_id] === 'undefined') { 
     prev[t.car_id] = []; 
    } 
    prev[t.car_id].push(t); 
    return prev; 
}, {}); 



Object.keys(car_array).forEach(i => { 
    var array_of_cars_with_same_id = car_array[i]; 
    for (var i=0; i<=array_of_cars_with_same_id.length-1;i++){ 
     console.log(array_of_cars_with_same_id[i].price); 

     var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: [array_of_cars_with_same_id[i].full_option], 
       datasets: [{ 
        label: '# of Votes', 
        data: [array_of_cars_with_same_id[i].price] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 

    } 
    console.log("AAAAAAAAAAAAA"); 
}); 




</script>

來源

2016-05-05 John

是'Object {485：Array [4]，2072：Array [4]，9665：Array [3] ...}'應該和變量'json'一樣嗎？代碼是否爲'Object.keys（car_array）.forEach（i => {'你指的是'第二個代碼不工作'？什麼是不工作？ – whipdancer

@whipdancer Object {485：Array [4 ]，2072：Array [4]，9665：Array [3] ...}與變量json不同。變量json是一個與「Object {485：Array [4]，2072：Array [4]，9665：Array [3] ...}」類似的小例子，它太大了。這就是爲什麼我選擇了一個更簡單的例子。不工作的部分是應該爲每個鍵創建圖表的部分（在for循環中）。我只得到了所有按鍵的圖表。 – John

請提供'對象{485：數組[4]，2072：數組[4]，9665：數組[3] ...}' - 一個小版本。 3個鍵或類似的東西，以便有一個有代表性的樣本 - 或者構建您的樣本，以便它完全模仿您正在處理的數據。 – whipdancer

有幾個與你的代碼的問題。

首先，您只使用單個canvas元素。每個圖表都需要自己的畫布元素。正因爲如此，所添加的每個圖表都只是在前面的圖表上呈現。

至少，你必須給每個項目一個新的畫布。你可以改變你的代碼來完成它。

將圖表的根元素更改爲您將追加圖表的基本<div>元素。

<div class="panel-body"> 
    <div id="chart-holder"></div> 
</div>

我會創建一個變量來保存購物車的數量和根元素。

var chart_holder = $('#chart-holder'); 
var chart_count = 0;

更改for loop以使用這些新變量。

for (var i = 0; i <= car_type.length - 1; i++) { 
    chart_holder.append('<canvas id="myChart' + chart_count + '" width="400" height="400"></canvas>') 

    var ctx = $("#myChart" + chart_count); 
    var data = []; 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
     labels: [car_type[i].full_option], 
     datasets: [{ 
      label: '# of Votes', 
      data: [car_type[i].price] 
     }] 
     }, 
     options: chart_opts 
    }); 
    chart_count++; 
}

這將爲每個數組中的每個對象創建一個新圖表。我創建了a fiddle to demonstrate。

但是，根據數據，我會推薦一種不同的方法。我會爲每個唯一鍵創建一個圖表，而不是每個元素的圖表。

您需要解析每個數組以抽出每個圖表的標籤和數據。這裏有一個例子可以從每個數組中獲取數據。有一個變量來捕獲圖表的數據和圖表的標籤。

var car_data = [], car_labels = []; 
for (var i = 0; i <= car_type.length - 1; i++) { 
    car_data.push(car_type[i].price); 
    car_labels.push(car_type[i].full_option); 
}

我們可以通過car_data和car_labels到chart.js之初始化。

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: car_labels, 
    datasets: [{ 
     label: 'Car Type ' + ct, 
     data: car_data 
    }] 
    }, 
    options: chart_opts 
});

這裏是一個fiddle to demonstrate a single chart per car_id。

來源

2016-05-07 03:54:49 whipdancer

謝謝，第二種方法就像我一直在尋找（每個car_id一張圖）。但事實上，通過這種方式，我不能通過「面板」在carcode的HTML代碼中顯示單個圖表。我在工作中使用的角度，是否有可能循環通過「div class =」面板面板默認「ng-repeat像這樣」chart_holder「中的圖表？清楚我怎樣才能從chart_holder獲得一個數組來做一個循環與？我不知道我想要什麼是可以理解的。如果不是我會嘗試另一種方式來顯示我的圖表使用你給我看。謝謝 – John

你可能想考慮一個自定義指令，包含圖表。對Angular來說，我還是一個新手，所以我不能在這方面給你太多幫助。 – whipdancer

顯示許多圖表具有相同源的JavaScript的數據（地圖（鍵，值））

回答

相關問題