如何使用Java脚本从canvas.js中的图表JS数据显示表? [英] how to display table from chart js data in canvas.js using java script .?

问题描述

在我的项目中，我需要使图表更具响应性.我也使用chartjs数据打印表，但是在table中得到了垃圾值.也可以使用其他任何方法

In my projects i need to make my chart more responsive . I print table from chartjs data using too but i got garbage value in table . any other method is also appreciated

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>

推荐答案

这是相同的 addTable()函数，但有一些更改:

This is the same addTable() function with a few changes:

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
    });
}

此外，此选项还可以根据您的需求缩放图表:

Also this option makes the chart scale according to your needs:

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

您还可以添加此 CSS 以使其接近您的期望，但这是可以获得的最接近的数字，因为它们具有不同的结构.它们可能无法完美对齐.

You can also add this CSS to make it close to what you expect, but this is the closest it can get because they have different structures. They cannot possibly align perfectly.

#chartData td {
    text-align: center;
}

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

Also try experimenting with more CSS styles and see the outcome

这篇关于如何使用Java脚本从canvas.js中的图表JS数据显示表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！