如何使用 java 腳本在 canvas.js 中顯示圖表 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，但有一些更改：

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 styles 並查看結果