如何基于Node JS发送的JSON数据在HTML页面上显示图表

Nomadev95

我希望在客户端HTML / JS上显示我的JSON数据,该数据是使用chartjsD3.js(或任何相关的东西)以图表的形式从服务器端NodeJS API获取的

这是我的 index.html

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" height="400px" width="400px"></canvas>
<script type="text/javascript">
  $(document).ready(function () {
    $.ajax({
      url: 'http://localhost:8050/api/opcounterTest',
      type: 'POST',
      dataType: 'json',
      success: function (res) {
        console.log(res);
        divData = '';
        var myLabels = [];
        var myData = [];
        $.each(res, function (key, value) {
          console.log(key);
          console.log(value);
          myLabels.push(key);
          myData.push(value);
        });

        var ctx = document.getElementById('chart');

        var myBarChart = new Chart(ctx, {
          type: 'pie',
          data: {
            labels: myLabels,
            datasets: [{
              label: 'Labels',
              data: myData,

              backgroundColor: [
                'rgba(75, 192, 192, 0.2)',
                'rgba(255, 99, 132, 0.2)'
              ],
              borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(255,99,132,1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });

      }
    });
  });
</script>

这就是我对图表知识非常了解的结果。我暂时计划在饼图中绘制数据。

控制台日志结果

{insert: 0, query: 524, update: 0, delete: 0, getmore: 22492, …}
command: 169411
delete: 0
getmore: 22492
insert: 0
query: 524
update: 0
__proto__: Object
特里摩斯

new Chart()每次都在$.each()循环中创建一个

您的逻辑如下:

for each (key, value) in res:
  create a new Chart containing just this (key, value)

您几乎可以肯定要这样做:

create empty arrays myLabels[] and myData[]

for each (key, value) in res:
  add key to myLabels[]
  add value to myData[]

then
  create one (and only one) new Chart using myLabels[] and myData[]

您的data资产new Chart()将如下所示:

data: {
  labels: myLabels,
  datasets: [{
    label: 'Labels',
    data: myData,

    backgroundColor: [
      'rgba(75, 192, 192, 0.2)',
      'rgba(255, 99, 132, 0.2)'
    ],

    borderColor: [
      'rgba(75, 192, 192, 1)',
      'rgba(255,99,132,1)'
    ],
    borderWidth: 1
  }]
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在html页面上显示从android应用发送到php的数据?

使用Node.js从MySQL提取数据并显示在HTML页面上

在HTML页面上显示来自node.js服务器的数据

如何将JSON数据存储在数组中,然后将其显示在HTML页面上

如何在node.js“ html页面”中显示json字符串化数组数据?

如何在HTML页面上显示json / csv文件的内容?

如何在HTML页面上显示JSON文件

如何在HTML页面上显示JS循环的输出

如何在我的HTML页面上显示JS值

如何让我的所有图表都显示在我的 html 页面上?

如何使用node.js获取当前目录名称并将其显示在html页面上

如何在 HTML 页面上提取 JSON 数据

如何在JS中基于CSS类插入Node?

基于Node.js的流程管理器如何工作?

如何使用Node.js从Node.js发送和获取JSON数据到HTML

无法使用JSON数据作为图表输入在Codeigniter页面上显示Morris.JS图表

如何使用基于令牌的身份验证在Node.js中实现基于角色的授权?

如何在我的React js页面中显示来自json数据的html代码?

使用mongoose node.js在单个页面上显示2个集合的数据

使用 Node.js 从 MySQL 获取数据并在索引页面上显示

如何基于单击哪个按钮在页面上显示模式

如何在页面上显示php发送的jsonp响应

如何在同一HTML页面上显示来自两个不同模型的数据

如何从底部到顶部在html页面上显示mysql数据库中的内容

如何使用 Node.JS 将 MongoDB 数据集合显示到 index.html 页面

如何根据字符串值在页面上显示或隐藏 JSON 数据?

如何在ASP.Net Core MVC模型中使用C#从rest api解析json数据并将其显示在HTML页面上

如何让用户输入文本到字段,将文本发送到数据库,然后显示在页面上?

如何从URL加载JSON并通过在HTML页面上使用纯JavaScript进行显示?