从charts.js中的数组中提取数据

时间:2018-06-09 17:16:10

标签: javascript arrays chart.js

快速提问。你如何从一个数组中提取一个特定的值(我认为这就是它所称的)是chart.js图表​​。这段代码位于我网站上的iframe中,我希望将一个数组传递给它,其中包含所有信息。然后,我试图从图表的数组中取出值,从阵列或标签中取出Tickers,以及工具提示的公司名称。这可能吗?我对编码很陌生,所以当你不知道正确的术语时,很难找到这个问题的答案。谢谢!

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
  <script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
window.onload = function () {

var ctx = document.getElementById("myChart");

var titles = ["BTC", "LTC", "XMR", "ABC", "NBC"];
var chartData = [
       {  Name: "Company Name", Ticker: "ABC", P: 200  },
       {  Name: "Company Name", Ticker: "ABD", P: 200  },
       {  Name: "Company Name", Ticker: "ABF", P: 100  },
       {  Name: "Company Name", Ticker: "ABG", P: 100  },
       {  Name: "Company Name", Ticker: "ABH", P: 100  },
       ];

var myChart = new Chart(ctx, {

type: 'doughnut',

data: {


 //***Would like to pull just the Names from chartData***
 labels: chartData,

 datasets: [{

  //***Would like to pull just the P value from chartData***
  data: chartData,

  backgroundColor: ["#00355E", "#095885", "#2C7EB0", "#579BCE", "#76B6EA", "#A1CBEB", "#B8D8F0", ], 
  borderWidth: 0
 }]
},

options: {
 legend: {display: false,},

 pieceLabel: {

  //***Would like to pull Ticker from chartData***
  render: function (args) {return args.label+ "(Ticker Symbol)" + "  $" + args.value;},

  precision: 2,
  fontSize: 16,
  fontColor: "darkgrey",
  fontFamily: "avenir",
  position: 'outside',
  outsidePadding: 40,
 },

 tooltips:{
  mode: 'point',
  intersect: false,
  backgroundColor: "white",
  bodyFontFamily: "avenir",
  bodyFontStyle: 'normal',
  bodyFontSize: 18,
  bodyFontColor: "#3D9BE9",
  xPadding: 15,
  yPadding: 15,
  caretSize: 0,
  cornerRadius: 5,
  displayColors: false,
 },

 rotation: 1.1,
 cutoutPercentage: 60,
}
});

}

</script>

</body>
</html>

0 个答案:

没有答案