Добавить chart.js в приложение sammy.js - PullRequest
Новая
       17

Добавить chart.js в приложение sammy.js

0 голосов
/ 30 ноября 2018

Я пытаюсь добавить диаграмму chart.js в созданное мною приложение sammy.js.

Мой вызов ajax выглядит как фрагмент (ниже), это очень простые вещи, где я вызываюконечная точка и при успешном выполнении я отображаю шаблон и затем вызываю функцию javascript для отображения диаграммы (также ниже).

Единственное, что я получаю следующую ошибку при попытке отобразить мою диаграмму.

Не удалось создать диаграмму: невозможно получить контекст из данного элемента

Кто-нибудь понял, что я делаю неправильно? 

$.ajax({
    url: 'api/rx/items',
    dataType: 'json',
    success: function(items) {

        // Render template            
        context.render('templates/item.template').appendTo(context.$element());

        // Call renderChart function to render my chart
        renderChart($('#myChart'));
    }

Это мой самыйпростая функция renderChart . 

function renderChart(ctx) {
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  '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)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
}
...