将chart.js添加到sammy.js应用程序

时间:2018-11-30 14:22:10

标签: chart.js sammy.js

我正在尝试将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
                  }
              }]
          }
      }
  });
}

0 个答案:

没有答案