从UL获取值以填充Google Chart

时间:2015-06-30 16:21:40

标签: javascript jquery

我有一个清单:

<div class="neo-cqwp-barchart">
    <ul class="dfwp-list" style="width:100%">
      <li class="dfwp-item">
        <div class="neo-cqwp-barchartItem">
            <div class="neo-cqwp-barchartTitle">June</div>
            <div class="neo-cqwp-barchartTarget">125000</div>
            <div class="neo-cqwp-barchartActual">135000</div>
        </div>
      </li>
      <li class="dfwp-item">
        <div class="neo-cqwp-barchartItem">
            <div class="neo-cqwp-barchartTitle">May</div>
            <div class="neo-cqwp-barchartTarget">115000</div>
            <div class="neo-cqwp-barchartActual">135000</div>
        </div>
      </li>
      <li class="dfwp-item">
        <div class="neo-cqwp-barchartItem">
            <div class="neo-cqwp-barchartTitle">April</div>
            <div class="neo-cqwp-barchartTarget">80125</div>
            <div class="neo-cqwp-barchartActual">135000</div>
        </div>
      </li>
    </ul>
</div>

有了这些数据,我试图在Google Charts中填充data.addRows:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization. DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Target');
        data.addColumn('number', 'Actual');

        $(".neo-cqwp-barchart li.dfwp-item .neo-cqwp-barchartItem").each(function(i,e) {
            var barchartTitle = [];
            var barchartTarget = [];
            var barchartActual = [];
            barchartTitle.push($(this).children(".neo-cqwp-barchartTitle").html());
            barchartTarget.push($(this).children(".neo-cqwp-barchartTarget").html());
            barchartActual.push($(this).children(".neo-cqwp-barchartActual").html());            
        });
        data.addRows([
            [barchartTitle, barchartTarget, barchartActual],
            [barchartTitle, barchartTarget, barchartActual],
            [barchartTitle, barchartTarget, barchartActual],
            [barchartTitle, barchartTarget, barchartActual]
        ]);

        var options = {
            //title: '',
            //colors: ['#515254', '#00B0F0'],
            legend: { position: 'top', alignment: 'center', maxLines: 3 }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('revenuetarget'));

        chart.draw(data, options);

    }
</script>
<div id="revenuetarget" style="width: 100%; height: 300px;"></div>

data.addRows是我需要从.each函数中提取的值重复的内容。我需要它看起来像这样:

data.addRows([
                [June, 125000, 135000],
                [May, 115000, 135000],
                [April, 80125, 135000]
            ]);

任何指导都将不胜感激!

谢谢,

0 个答案:

没有答案