如何在canvas.js中使用java脚本从图表中显示表格js数据？

Question

在我的项目中，我需要让我的图表更响应。我打印表从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>

Answer 1

那么，你得到的错误是什么，你希望从代码中得到什么？还请提供，除此之外，这里的这段代码。

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

是在添加数据的长度而不是数据本身，请去掉... ... .length 来获取实际数据。

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

Answer 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 风格，并看到结果