как отобразить данные диаграммы в виде html таблицы chartjs - PullRequest
Новая
       14

как отобразить данные диаграммы в виде html таблицы chartjs

0 голосов
/ 11 января 2020

Я хотел бы знать, как просмотреть данные диаграммы в виде таблицы html при нажатии кнопки на диаграмме js. Я реализовал линейный график, используя диаграмму js, 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>

1 Ответ

0 голосов
/ 13 января 2020

Вам необходимо определить, что на диаграмме данные могут быть представлены в виде столбцов и строк в таблице. Если вы назвали свою ось 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 ), что вы должны предоставить образцы ({ ссылка }), то, что вы пытались сделать сами, но это не сработало. Поэтому я не уверен, предоставил ли я ответ, который вы ищете.

...