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);
  });
});