I would like to know how to view chart data as html table on button click in chartjs. I have implemented the line chart using chartjs , xaxis represents the color yaxis represents votes and points
Working fiddle:/ I want to display chart as table
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>
I would like to know how to view chart data as html table on button click in chartjs. I have implemented the line chart using chartjs , xaxis represents the color yaxis represents votes and points
Working fiddle:https://jsfiddle/miyavv/ehqrL20o/ I want to display chart as table
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>
- Unfortunately, your question is not clear, please provide more info or sandbox sample. – Alex Commented Jan 11, 2020 at 12:26
- @Alex thanks for reply, I want to display chart data as html table, – Sen Commented Jan 13, 2020 at 1:53
- @Alex I have updated my question and fiddle – Sen Commented Jan 15, 2020 at 15:16
- What's the problem with @SciFiThief answer? what do you mean by "chart as table"?please draw your desired result and attach to question. could help to clarify exactly what do you intend – Alex Commented Jan 15, 2020 at 21:36
1 Answer
Reset to default 1You need to identify what in your chart data could be represented as columns and rows in the table. If you named your x-axis, you could represent the chart data like this:
Color | # of Votes | # of Points
Red 12 7
Blue 19 11
... and so on
Also, chart data can be represented as a crosstab which is a more direct representation (since datapoint lies where x and y intersects):
| Red | Blue | ... and so on
# of Votes 12 19
# of Points 7 11
Here's the example of how you can convert the chart data to crosstab: https://jsfiddle/tara5/cjvuphkL/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745295570a4621119.html
评论列表（0条）