Добавить суффикс в набор данных Chart.js? - PullRequest
Новая
       15

Добавить суффикс в набор данных Chart.js?

2 голосов
/ 11 июня 2019

Я использую Chart.js для отображения данных на моем сайте и хотел бы добавить суффикс к полям данных, чтобы указать, что они выражены в граммах (г).Я не могу найти в документации ничего, что могло бы помочь, но это кажется довольно простой функцией.

Например, я бы хотел, чтобы данные отображались как 32g, 38g, 53g, а не какпросто 32, 38, 53. Вы не можете просто добавить его в массив, так как это требуется в виде чисел только для генерации диаграммы.

PHP 

$myChart = array(
    "type" => "doughnut",
    "data" => array(
        "labels" => ['Label1', 'Label2', 'Label3'],
        "datasets" => [
            array(
                "data" => [ 32, 38, 53 ],
            )
        ]
    )
);

HTML 

<div class="chart" data-charts="{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"],}]}}">
    <div class="chart-container">
        <canvas class="chartjs-render-monitor">
        </canvas>
    </div>
</div>

JQUERY 

// Chart init
window.onload = function() {

    // Find all charts
    var containers = document.querySelectorAll('.chart');

    // For each chart
    containers.forEach(function(container) {

        // Parse data
        var charts = JSON.parse(container.dataset.charts);

        // Add container div
        var div = document.createElement('div');
        div.classList.add('chart-container');

        // Add canvas for chart to be drawn in
        var canvas = document.createElement('canvas');

        // Append new elements
        div.appendChild(canvas);
        container.appendChild(div);

        // Config
        var ctx = canvas.getContext('2d');
        var config = charts;

        // Init chart
        var myChart = new Chart(ctx, config);

    });
};

1 Ответ

1 голос
/ 11 июня 2019

Чтобы сделать это, вы можете использовать обратный вызов конфигурации всплывающих подсказок, чтобы добавить строку к значению в наборе данных, что-то вроде этого: 

var containers = document.querySelectorAll('.chart');
containers.forEach(function(container) {
  var charts = JSON.parse(container.dataset.charts);

  var div = document.createElement('div');
  div.classList.add('chart-container');

  var canvas = document.createElement('canvas');
  div.appendChild(canvas);
  container.appendChild(div);

  var ctx = canvas.getContext('2d');
  var config = charts;
  var myChart = new Chart(ctx, $.extend(config, {
    options: {
      tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
          label: function(tooltipItems, data) {
            return data.datasets[0].data[tooltipItems.index] + 'g';
          }
        }
      }
    }
  }));
});
canvas {
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="chart" data-charts='{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"]}]}}'></div>
...