如何将图表数据显示为 html 表格 chartjs

Question

我想知道如何在 chartjs 中单击按钮时将图表数据查看为 html 表。 我已经使用 chartjs 实现了折线图，xaxis 代表颜色 yaxis 代表投票和点数

工作小提琴： https : //jsfiddle.net/miyavv/ehqrL20o/我想将图表显示为表格

Color | # of Votes | # of Points
Red     12           7
Blue    19           11
... and so on

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
//html
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Answer 1

您需要确定图表数据中的哪些内容可以表示为表格中的列和行。 如果您为 x 轴命名，则可以像这样表示图表数据：

Color | # of Votes | # of Points
Red     12           7
Blue    19           11
... and so on

此外，图表数据可以表示为交叉表，这是一种更直接的表示（因为数据点位于 x 和 y 相交的位置）：

             | Red | Blue | ... and so on
# of Votes     12    19
# of Points    7     11

以下是如何将图表数据转换为交叉表的示例： https : //jsfiddle.net/tara5/cjvuphkL/

另外，我同意评论（@Alex），您应该提供示例（ https://stackoverflow.com/help/how-to-ask ），这是您尝试自己做的事情，但没有奏效。 因此，我无法确定我是否提供了您正在寻找的答案。

如何将图表数据显示为 html 表格 chartjs

问题描述

1 个解决方案

解决方案1
1 2020-01-13 04:59:55

如何将图表数据显示为 html 表格 chartjs

问题描述

1 个解决方案

解决方案1 1 2020-01-13 04:59:55

解决方案1
1 2020-01-13 04:59:55