Chart.js - получение данных из HTML - PullRequest
Новая
       34

Chart.js - получение данных из HTML

0 голосов
/ 06 февраля 2019

Я могу получить 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>

1 Ответ

0 голосов
/ 06 февраля 2019

Я вижу, что при извлечении данных из атрибута данных 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);
  });
});
...