如何在每行的表格单元格内创建条形图或柱形图

Question

我需要在每行的表单元格中创建条形图或列图。

这是我的JSON

[
  {
    "Chocolate": [
      {
        "kisses": [
          {
            "2022": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            }
          },
          {
            "2021": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            }
          }
        ]
      },
      {
        "kitkat": [
          {
            "2022": {
              "jan": 1000,
              "feb": 3200,
              "mar": 4500
            }
          },
          {
            "2021": {
              "jan": 2000,
              "feb": 200,
              "mar": 7030
            }
          }
        ]
      }
    ]
  },
  {
    "Drinks": [
      {
        "Coco cola": [
          {
            "2022": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            }
          },
          {
            "2021": {
              "jan": 2200,
              "feb": 1200,
              "mar": 7100
            }
          }
        ]
      },
      {
        "Pepsi": [
          {
            "2022": {
              "jan": 1000,
              "feb": 3200,
              "mar": 4500
            }
          },
          {
            "2021": {
              "jan": 4550,
              "feb": 2100,
              "mar": 3430
            }
          }
        ]
      }
    ]
  }
]

我需要单元格中的列图表

示例输出

我找到了googlecharts并尝试过，但是无法达到我的要求。

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Category');
  data.addColumn('number', 'Name');
  data.addColumn('string', 'Chart');
  data.addRows([
    ['Choclate', {v: 10000, f: 'Kisses'}, null],
    ['Drinks', {v: 12500, f: 'Pepsi'}, null],
    ['Food', {v: 7000, f: 'Pizza'}, null]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));

  google.visualization.events.addListener(table, 'ready', function () {
    // table body
    Array.prototype.forEach.call(table.getContainer().getElementsByTagName('tbody'), function(tableBody) {
      // table rows
      Array.prototype.forEach.call(tableBody.rows, function(tableRow, rowIndex) {
        // table cells
        Array.prototype.forEach.call(tableRow.cells, function(tableCell, cellIndex) {
          // determine if last cell
          if (cellIndex === (tableRow.cells.length - 1)) {
            // add chart continer
            var chartContainer = tableCell.appendChild(document.createElement('div'));
            chartContainer.className = 'chart';

            // build chart data table
            var dataChart = new google.visualization.DataTable();
            dataChart.addColumn('number', 'x');
            dataChart.addColumn('number', 'y');
            for (var i = 0; i <= rowIndex; i++) {
              dataChart.addRow([i, data.getValue(i, 1)]);
            }

            // draw chart
            var chart = new google.visualization.ColumnChart(chartContainer);
            chart.draw(dataChart, {
              chartArea: {
                left: 24,
                top: 16,
                right: 24,
                bottom: 16,
                height: '100%',
                width: '100%'
              },
              height: '100%',
              legend: 'none',
              pointSize: 6,
              width: '100%'
            });
          }
        });
      });
    });
  });

  table.draw(data, {showRowNumber: true, width: '60%', height: '70%'});
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

即使我需要在JSON中获得具有枢轴类别行的JSON中的值的精确列图表，如所示示例图像所示。

请建议某人如何实现这一目标。

任何图表js都很好，例如plotly.js或googlecharts或echarts，即JavaScript库。

Answer 1

在这里，代码是不言自明的，包括注释。

使用 chart.js

制作

https://jsfiddle.net/sean7777/j7zy165v/81/