使用 jQuery 动态创建图表

Question

我有一个页面列出了大约 30 个投资组合，每个投资组合有 3 只股票。我正在尝试创建一个饼图以配合每个投资组合，其中饼图将由该投资组合中三只股票的价值组成。

股票的价值被打印到屏幕上，所以我可以用 jQuery .text() 和 .slice().

很容易地抓住它们

当我想更改图表中的数据以与每个投资组合（或股票组）对应时，我的问题就出现了。

<script>:

  $(document).ready(function() {

    $.each($('.stocks-data'), function(){
        $this = $(this);
        $a_base = $this.children(".a-card").text();
        $a_pie = $a_base.].replace ( /[^\d.]/g, '' );;
        console.log($a_pie)
        $b_base = $this.children(".b-card").text();
        $b_pie = $b_base.replace ( /[^\d.]/g, '' );
        console.log($b_pie)
        $c_base = $this.children(".c-card").text();
        $c_pie = $c_base.replace ( /[^\d.]/g, '' );
        console.log($c_pie)

        var data = [
        {
            value: $a_pie,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Stock A"
        },
        {
            value: $b_pie,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Stock B"
        },
        {
            value: $c_pie,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Stock C"
        }
        ]

        $this.children('.stocks-pie'), (function(index, element){          
            var ctx = element.getContext("2d");
            new Chart(ctx).Doughnut(data ,{animateRotate: false});
        });

    });

});

page.php:

#in a php echo
<div class=".stocks-data">
    <div class="name-container">
        <div class="name">Name:  '.$name.'</div>
    </div>
    <div class="a-card">Stock A:  '.$stocka.'g</div>
    <div class="b-card">Stock B:  '.$stockb.'g</div>
    <div class="c-card">Stock C:  '.$stockc.'g</div>
    <canvas class="stocks-pie" height="80" width="100"></canvas>
</div>

示例数据：

.$stocka. = 14.2 .$stockb. = 2.8 .$stockc. = 3.9

问题：

我可以让图表工作，但只显示每个投资组合图表的最后投资组合数据，这显然不是我想要的。我怎样才能让它变得动态，其中图表是使用它自己的数据为每个投资组合创建的？

补充信息：

这正在使用 Charts.js

Answer 1

工作 jsfiddle - http://jsfiddle.net/6cgo4opg/45/

修复了以下问题

$a_pie = $a_base.].replace ( /[^\d.]/g, '' );;

应该是

$a_pie = $a_base.replace(/[^\d.]/g, '');

和

$this.children('.stocks-pie'), (function(index, element){

应该是

$this.children('.stocks-pie').each(function (index, element) {

和

<div class=".stocks-data">

应该是

<div class="stocks-data">

使用 jQuery 动态创建图表

Dynamically creating graphs with jQuery

javascript

jquery

chart.js