如何使用 javascript 从 canvas.js 中的图表 js 数据显示表格？答案

【问题标题】：how to display table from chart js data in canvas.js using java script .?如何使用 javascript 从 canvas.js 中的图表 js 数据显示表格？
【发布时间】：2020-05-28 19:20:35
【问题描述】：

在我的项目中，我需要让我的图表更具响应性。我也使用 chartjs 数据打印表格，但我在表格中得到了垃圾值。任何其他方法也值得赞赏

var ctxP = canvasP.getContext('2d')
    var myPieChart = new Chart(ctxP, {type: 'line',
    data: 
        { 
            labels: JSON.parse(localStorage.getItem("label")),
            datasets: [
      {label: "DFT", data: JSON.parse(localStorage.getItem("dft")), borderColor: "ORANGE",fill: false,markerType: "triangle"},
      {label: "FUNCTIONAL", data: JSON.parse(localStorage.getItem("fun")), borderColor: "GREEN",fill: false,markerType: "circle"}
    ]
        },
        options: {
            legend: {
            display: true,
            position: "right"

            }
        }
    });

addTable(myPieChart);

        function addTable(myPieChart){
                              var tableData = "";
                             for(var i = 0; i < myPieChart.data.datasets.length; i++)
                             { 
             tableData += "<tr>" + "<td style='color:" + myPieChart.data.datasets[i].borderColor + 
                            "'>&#9632;" + myPieChart.data.datasets[i].label + "</td>";
              for(var j = 0; j < myPieChart.data.datasets[i].data.length; j++){
                      tableData += ("<td>" + myPieChart.data.datasets[i].data[j].length +"%</td>")
                         }

                      tableData += "</tr>";
                        }
                 $("#chartData").append(tableData)
                   }    
              }</script>

【问题讨论】：

dft 和 fun 的本地存储中究竟使用了哪些数据？请提供您用来帮助我们的localStorage.setItem() 的代码，以便我们更好地理解和帮助您
[stackoverflow.com/questions/61968276/… 在这一个中，我从用户输入中获取数据并将数据保存到绘图图表中，以便我将其渲染到不同的地方，但我也需要表格，所以我使用上面的代码来绘制图表和以更具响应性的方式使用表格

标签： javascript html chart.js

【解决方案1】：

那么，您遇到的错误是什么？您对代码有什么期望？除此之外，请在此处提供此代码：

tableData += ("<td>" + myPieChart.data.datasets[i].data[j].length +"%</td>")

是添加数据的长度而不是数据本身，去掉.length得到实际数据：

tableData += ("<td>" + myPieChart.data.datasets[i].data[j] +"%</td>")

【讨论】：

谢谢兄弟，我得到了数据。但我的表格和图表没有对齐
我想以同步的方式对齐表格和绘制图表数据

【解决方案2】：

这是相同的 addTable() 函数，但有一些变化：

function addTable(myPieChart) {
    var tableData = "";
    var data_size = 0;
    for (var i = 0; i < myPieChart.data.datasets.length; i++) {
        tableData += "<tr>";
        for (var j = 0; j < myPieChart.data.datasets[i].data.length; j++) {
            tableData += ("<td>" + myPieChart.data.datasets[i].data[j] + "%</td>")
        }
        tableData += "<td style='color:" + myPieChart.data.datasets[i].borderColor +
            "'>&#9632;" + myPieChart.data.datasets[i].label + "</td>";
        // Notice how I have swapped the labels with the data
        // Because your legend is also on the right
        tableData += "</tr>";
    }
    $("#chartData").append(tableData);
    data_size = $('#chartData').children('tr:first').children('td').length;
    // Get the size of the data in the table
    $('#chartData').children('tr').children('td').css({
        // This 500 is the width of the canvas element that holds the chart
        // This code makes the width of the cells responsive
        width: 500 / data_size
    });
}

此选项还可以根据您的需要调整图表：

options: {
    //set responsive to false
    responsive: false,
    legend: {
        display: true,
        position: "right"
    }
}

您也可以添加此CSS 以使其接近您的预期，但这是最接近的，因为它们具有不同的结构。 它们不可能完美对齐。

#chartData td {
    text-align: center;
}

还可以尝试更多CSS 样式并查看结果

【讨论】：