显示多个具有相同源javascript(map(key，value））数据的图表

Display many charts with data of the same source javascript ( map (key,value) )

本文关键字：value 数据 key map 显示 javascript      更新时间：2023-09-26

我有一张形式的地图

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

我想为每个键显示一个图表。

我有一个与我想要的类似的例子，我试图在许多图表中显示我的值：在这个例子中，我的密钥是：car_id

第一步：对我的数组进行排序，得到一张带有键的地图。它运行良好。但第二个不起作用。。。我想根据car_id和每个面板的引导程序显示每个数据的图表。。。我做错了什么？

谢谢

<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>

您的代码有几个问题。

首先，您只使用一个canvas元素。每个图表都需要自己的画布元素。正因为如此，您添加的每个图表都只是在上一个图表的顶部进行渲染。

至少，你必须给每个项目一个新的画布。您可以更改代码来实现这一点。

将图表的根元素更改为基本的<div>元素，以便将图表附加到该元素。

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

我会创建一个变量来保存cart计数和根元素。

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++;
}

这将为每个数组中的每个对象创建一个新的图表。我制作了一把小提琴来演示。

然而，根据这些数据，我建议采用不同的方法。我会为每个唯一的键创建一个单独的图表，而不是为每个元素创建一个图表。

您需要解析每个数组来提取每个图表的标签和数据。下面是一个从每个数组中获取数据的示例。有一个变量用于捕获图表的数据和图表的标签。

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
});

这里有一个小提琴来演示每个car_id的单个图表。

相关文章：