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

【问题标题】：how to display chart data as html table chartjs如何将图表数据显示为html表格chartjs
【发布时间】：2020-04-28 19:16:46
【问题描述】：

我想知道如何在 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>

【问题讨论】：

很遗憾，您的问题不清楚，请提供更多信息或沙盒示例。
@Alex 感谢回复，我想将图表数据显示为 html 表格，
@Alex 我已经更新了我的问题和小提琴
@SciFiThief 的回答有什么问题？ “图表作为表格”是什么意思？请画出您想要的结果并附上问题。可以帮助您明确您的意图

标签： javascript jquery reactjs datatable chart.js

【解决方案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/

另外，我同意 cmets (@Alex) 的观点，即您应该提供样本 (https://stackoverflow.com/help/how-to-ask)，这是您尝试自己做的事情，但没有奏效。因此，我无法确定我是否提供了您正在寻找的答案。

【讨论】：

感谢回复，我已经更新了我的问题并添加了小提琴链接
我看到您提供了一个小提琴链接，但仍然没有任何代码可以让您尝试将图表数据转换为表格。此外，您可以使用交叉表轻松地将我的示例修改为表格（它基本上是一个表格）。您只需要交换行和列，并将第一列命名为“颜色”。该示例包含所有必要的代码。