chart.js之 - 从HTML获取数据

Question

我能够检索条形图的data但我无法匹配labels，并与数据colors。

如何更改的功能，因此，如果每个<canvas>有：

data-chart="[1,2,3]" 
data-label="[a,b,c]"
data-color="[red,blue,green]"

数据点的返回：

a = 1 color is red,
b = 2 color is blue,
c = 3 color is green

眼下标签和颜色不与数据点匹配。

$(document).ready(function() {
  var barStyle = {
    scaleLineColor: "rgba(0,0,0,0)",
    scaleShowLabels: true,
    scaleShowGridLines: false,
    pointDot: false,
    datasetFill: false,
    // Sadly if you set scaleFontSize to 0, chartjs crashes
    // Instead we'll set it as small as possible and make it transparent
    scaleFontSize: 9,
  };
  $(".barchart").each(function() {
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $(this)
      .get(0)
      .getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);

    // Get the chart data and convert it to an array
    var chartData = JSON.parse($(this).attr("data-chart"));

    // Build the data object
    var data = {};
    var labels = [];
    var datasets = {};

    // Create a null label for each value
    for (var i = 0; i < chartData.length; i++) {
      labels.push("");
    }

    // Create the dataset
    datasets["strokeColor"] = $(this).attr("data-color");
    datasets["data"] = chartData;

    // Add to data object
    data["labels"] = $(this).attr("data-label");
    data["datasets"] = Array(datasets);

    new Chart(ctx).Bar(data, barStyle);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>

<canvas id="myChart" width="200" height="100" class="barchart" data-chart="[200,25,90,214,96,27,210]" data-label="[One,Two,Three,Four,Five,Six,Seven]" data-color="['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)']"></canvas>

Answer 1

我看到有一些问题，当您从HTML数据属性中获取数据，代码$(this).attr("data-label")应该$(this).data("label")所以它会给予正确的值。

还有一些其他的改进还在于我在你的代码已经取得看到小提琴 - > https://jsfiddle.net/pjr5wuft/3/或下面的代码。

$(document).ready(function() {
  var barStyle = {
    scaleLineColor: "rgba(0,0,0,0)",
    scaleShowLabels: true,
    scaleShowGridLines: false,
    pointDot: false,
    datasetFill: false,
    // Sadly if you set scaleFontSize to 0, chartjs crashes
    // Instead we'll set it as small as possible and make it transparent
    scaleFontSize: 9,
  };

  $(".barchart").each(function() {
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $(this)
      .get(0)
      .getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);   
    // Get the chart data and convert it to an array
    var chartData = $(this).data("chart");

    // Build the data object
    var data = {};
    var labels = [];
    var datasets = {};

    // Create a null label for each value
    for (var i = 0; i < chartData.length; i++) {
      labels.push("");
    }

    // Create the dataset
    datasets["strokeColor"] = 'rgba(54, 162, 235, 0.2)';
    datasets["data"] = chartData;    

    // Add to data object
    data["labels"] = $(this).data("label");
    data["datasets"] = Array(datasets);

    new Chart(ctx).Bar(data, barStyle);
  });
});