使用jQuery动态创建图表

问题描述：

我有一个列出大约30个投资组合的页面，每个投资组合有3个股票。我正在尝试创建一个饼图来跟踪每个投资组合，其中饼图将由来自该投资组合中三只股票的值组成。使用jQuery动态创建图表

股票的价值被打印到屏幕上，所以我可以用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

问题：

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

补充信息：

这是使用Charts.js

从什么'CON返回sole.log（$ a_pie）' – Saqueib

它对于每个投资组合都不相同，但它与'。stocka。'基本相同。 – thefoxrocks

尝试在所有值上运行'parseFloat（$ a_pie）' – Saqueib

答

工作的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">

这真棒！非常感谢。 – thefoxrocks

使用jQuery动态创建图表

相关推荐