Question

我正在尝试为获取此数组的Chart.js收集值

data = [{ value:1, color:#123456 }]

HTML：

<table class="card">
    <tr class="section1">
        <td class="label">One</td>
        <td class="goal">1</td>
    </tr>
    <tr class="section2">
        <td class="label">Two</td>
        <td class="goal">2</td>
    </tr>
    <tr class="section3">
        <td class="label">Three</td>
        <td class="goal">3</td>
    </tr>
    <tr class="section4">
        <td class="label">Four</td>
        <td class="goal">4</td>
    </tr>
    <tr class="section5">
        <td class="label">Five</td>
        <td class="goal">5</td>
    </tr>
    <tr class="section6">
        <td class="label">Six</td>
        <td class="goal">6</td>
    </tr>
</table>

CSS：

table.card tr.section1 td.label{
    color: #c26558;
}
table.card tr.section2 td.label{
    color: #cdaf76;
}
table.card tr.section3 td.label{
    color: #6e9874;
}
table.card tr.section4 td.label{
    color: #809ead;
}
table.card tr.section5 td.label{
    color: #467082;
}
table.card tr.section6 td.label{
    color: #ac9578;
}

JAVASCRIPT：

var data = []; //{ value: 30, color:"#F38630" },
var goals = document.getElementsByTagName( $('table.card .goal').html() );
var quantities = jQuery.makeArray( goals );

for( var i=0; i<quantities.length; i++ ){
    var labelColor = '#000000';

    $('table.card .goal').each(function(){
        if( $(this).html() == quantities[i] ){
            labelColor = rgb2hex( $(this).closest('tr').find('.label').css('color') );
        }
    });

    data[i] = { 'value':quantities[i], 'color':labelColor };
}

这是我最近尝试制作一系列数量的工具。我在makeArray（）之前摆弄了jQuery.toArray（）。我不知道，也许我的整个方法都没有了。抓住css（'color'）的块正在工作，我对此非常满意，但我很难将.goal单元格的值转换为数组。

这是Chart.js文档：http://www.chartjs.org/docs/

Answer 1

我认为你使它变得比需要的要复杂得多。只需选择td.goal元素，然后使用.map()将对象返回到包含当前目标值的新数组。

var result = $("table.card tr[class^=section] td.goal").map(function(i, tr) {
    var goal = $(this);
    return {
        value: parseInt(goal.text(), 10),
        color:goal.prev().css('color') || '#000000'
    };
}).toArray();

Answer 2

使用.map()

Fiddle Demo

var data = $('.card tr').map(function () {
    $this = $(this);
    return {
        value: $this.find('.goal').text(),
        color: $this.find('.label').css('color') //will return like "rgb(194, 101, 88)"
    }
}).get();
console.log(data);

我需要构建一个数组数组，但是在概念化方面存在问题

2 个答案: