显示许多图表具有相同源的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的数据（地图（键，值））

回答

相关问题