Question

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

<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>

表格显示正常。我想我已经缩小了问题是在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;
}

小提琴 - http://jsfiddle.net/fv3ry41s/

chartjs表每个系列都没有进入下一个tr

1 个答案: