chartjs table 每个制作系列都没有进行到下一个 tr

Question

我遇到了一个相当烦人的问题，我想我只是遗漏了一些明显的东西。我正在使用 chartjs 从 table 创建图表。 table 是动态的，但是是简单的文本。问题是当生成图表时，table 中的所有值都在第一列中，就像一个系列而不是沿着图表绘制为单个点。这是我的 table:

<table>
<tr>
   <th>head1</th>
   <th>head2</th>
</tr>
<tr>
   <td>date1</td>
   <td>count1</td>
</tr>
<tr>
   <td>date2</td>
   <td>count2</td>
</tr>
 <tr>
   <td>date3</td>
   <td>count3</td>
</tr>
</table>

table 显示正常。我想我已经缩小了问题发生在 generateDataSetsFromTable 中的范围，我只是不确定原因。

var lineChartData2 = {labels: generateLabelsFromTable(),datasets: generateDataSetsFromTable()};

function generateLabelsFromTable()
{                       
    var labels = [];
    var rows = jQuery("tr");
    rows.each(function(index){
        if (index != 0)  // we dont need first row of table
        {
            var cols = $(this).find("td");      

            labels.push(cols.first().text());                           
        }
    }); 
    return labels;
}
function generateDataSetsFromTable()
{

    var data;
    var datasets = [];
    var rows = jQuery("tr");
    rows.each(function(index){
        if (index != 0) // we dont need first row of table
        {
           var cols = $(this).find("td");  
            var data = [];
            cols.each(function(innerIndex){
                if (innerIndex!=0) // we dont need first columns of the row                 
                      data.push($(this).text()); 


            }); 

            var dataset = 
            {
                fillColor: "rgba(238,155,0,0.2)",
                strokeColor: "rgba(217,0,0,1)",
                pointColor: "rgba(166,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data : data
            }
            datasets.push(dataset);
        }
    });
    return datasets;
}

我的图表已绘制，但所有值都显示在第一列中作为一个系列，而不是在 X 轴上展开。

Answer 1

在 generateDataSetsFromTable() 中，将您的数据集创建移到 tr 循环之外 (rows.each)

function generateDataSetsFromTable()
{
    var data;
    var datasets = [];
    var rows = jQuery("tr");
    var data = [];
    rows.each(function(index){
        if (index != 0) // we dont need first row of table
        {
           var cols = $(this).find("td");  
            cols.each(function(innerIndex){
                if (innerIndex!=0) // we dont need first columns of the row                 
                      data.push($(this).text()); 
            }); 
        }
    });

    var dataset = 
        {
            fillColor: "rgba(238,155,0,0.2)",
            strokeColor: "rgba(217,0,0,1)",
            pointColor: "rgba(166,0,0,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data : data
        }
    datasets.push(dataset);
    return datasets;
}

Fiddle - http://jsfiddle.net/fv3ry41s/

chartjs table 每个制作系列都没有进行到下一个 tr

chartjs table each making series not proceeding to next tr

javascript

charts

chart.js