javascript - 如果提供许多数据，图形不显示值/使用 ajax 在 HTML 中绘制 charrt

Question

嗨，我是 HTML 和 javascript 的新手，正在尝试建立一个网站。

我试图通过从我的数据库中检索数据、将它们转换为 Json 响应并将其传递给 HTML 来制作 HTML 中的直方图。

My Json response
{'bins':[b1,b2,b3,b4...], 'number':[n1,n2,n3,n4...]}

问题是，如果检索到的数据记录数大于某个值（大约 100 条，未经严格测试），图表会在那里，但它是空白的。

如果检索到的记录数较少，图表将正常显示。

我检查了 JSON 响应，并且响应确实每次都被发回。

<script>
  var endpoint = '/api/data/'
  var defaultData = []
  var labels = []
  $.ajax({
    type: "get",
    url: endpoint,
    success: function(data) {
      labels = data.bins
      defaultData = data.number
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: '# of records',
            data: defaultData
          }]
        }
      })
    },
    error: function(error_data) {
      alert('Error: ajax request error！')
      console.log('error')
      console.log(error_data)
    }
  })
</script>

<div class='row'>
  <div class='col-sm-3' url-endpoint='{% url "api-data" %}'>
    <canvas id='myChart' class="plot" data-url='/api/data' width='400px' , height='400px'> </canvas>
  </div>
</div>

非常感谢！

更新 我很抱歉没有提及我使用的包。我使用 Django 和 chart.js 来绘制这个图表。我发现这个问题的原因实际上是由于绘制图表后打印的数据。请参阅下面的代码以获取更多信息。

<!-- Plotting the chart -->
<script>
  var endpoint = '/api/data/'
  var defaultData = []
  var labels = []
  $.ajax({
    type: "get",
    url: endpoint,
    success: function(data) {
      labels = data.bins
      defaultData = data.number
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: '# of records',
            data: defaultData
          }]
        }
      })
    },
    error: function(error_data) {
      alert('Error: ajax request error！')
      console.log('error')
      console.log(error_data)
    }
  })
</script>

<div class='row'>
  <div class='col-sm-3' url-endpoint='{% url "api-data" %}'>
    <canvas id='myChart' class="plot" data-url='/api/data' width='400px' , height='400px'> </canvas>
  </div>
</div>

<!-- Printing the data in a table -->
<table class="table table-striped" data-toggle="table"
 data-pagination="true"  data-side-pagination="client"  data-height="700" data-show-columns="true" data-search="true" data-show-export="true"  data-click-to-select="true" data-toolbar="#toolbar" data-page-size="10" >

<thead>
    <tr>
      <th>Compound</th>
      <th>Standard name</th>
      <th>Value</th>
      <th>Specifier</th>
      <th>DOI</th>
      <th>Measurement Wavelength (None for not provided or unextracted)</th>
    </tr>
</thead>
 <ul>
       <tbody>
{% for record in records %}
       <tr>
<td>{{ record.compound }}</td>
<td>{{ record.normalised_name }}</td>
<td>{{ record.value }}</td>
<td>{{ record.specifier }}</td>
<td>{{ record.doi }}</td>
<td>{{ record.wavelength }}</td>
       </tr>
{% endfor %}
       </tbody>
<br><br><br>
</ul>
</table>

如果我去掉“打印表格中的数据”部分，那么无论检索多少数据，都可以成功绘制图表。

如果有人能帮助我发现我的代码的问题以及如何改进它的任何建议将非常有帮助，我们将不胜感激。

标签： javascripthtml