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

问题描述 投票:0回答:1

我想知道如何在表chartjs中查看图表数据。我已经使用chartjs实现了折线图,就像highcharts如何在chartjs中实现视图表数据]

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>

javascript jquery reactjs datatable chart.js
1个回答
0
投票

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

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

此外,图表数据也可以表示为交叉表,它是更直接的表示形式(因为轴x和y之间存在关系):

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

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

而且,我也同意评论(@Alex),您应该提供示例(https://stackoverflow.com/help/how-to-ask),这是您尝试自己做的,但没有用。因此,我无法确定是否提供了您所需要的答案。

© www.soinside.com 2019 - 2024. All rights reserved.