Question

我有一个名为dict的字典，如下所示：

var dict = {
  'Ex': 6,
  'C': 6,
  'blue': 2,
  'car': 2,
  'yellow': 2,
  'X': 4,
  'X3': 2
};

我想绘制它的直方图，其中键作为水平轴的标签，字典的值是作为垂直轴的频率，我试过：

<canvas id="myChart" width="100" height="100"></canvas>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: '# Frecuencies Words',
            data: [],

            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

然而问题是我不知道如何继续使用字典的值来执行图形，我想欣赏任何实现这一点的建议，我构建了以下jsfiddle以更好地解释这种情况： https://jsfiddle.net/xbbc677o/

Answer 1

你做得不好，现在只需要将该对象映射到data和label字段。让我们从labels

开始

Object.keys(dict)返回dict

中所有键的数组

所以我们把

labels: Object.keys(dict)

现在我们需要data数组的值，Object.keys和map我们可以轻松完成，我们使用Object.keys来获取所有键的数组在dict然后map中获取每个值的关键字，如下所示：

data: Object.keys(dict).map(function (key) { return dict[key]; })

Working fiddle

Object.keys和map都是ECMAScript 5规范的一部分，因此这不适用于ES3（IE 8或更低版本），但您可以获得这两个函数的pollyfils：

如何使用以下字典执行直方图？

1 个答案: