Javascript 如果提供许多数据，则图形不显示值/使用ajax在HTML中绘制字符

嗨，我是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>

var endpoint='/api/data/'
var defaultData=[]
变量标签=[]
$.ajax({
键入：“获取”，
url:endpoint，
成功：功能（数据）{
标签=data.bins
defaultData=data.number
var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：标签，
数据集：[{
标签：“#记录”，
数据：defaultData
}]
}
})
},
错误：函数（错误\u数据）{
警报（'错误：ajax请求错误！'）
console.log（'错误'）
console.log（错误\u数据）
}
})

非常感谢

更新 我很抱歉没有提到我用过的包裹。我使用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>

var endpoint='/api/data/'
var defaultData=[]
变量标签=[]
$.ajax({
键入：“获取”，
url:endpoint，
成功：功能（数据）{
标签=data.bins
defaultData=data.number
var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：标签，
数据集：[{
标签：“#记录”，
数据：defaultData
}]
}
})
},
错误：函数（错误\u数据）{
警报（'错误：ajax请求错误！'）
console.log（'错误'）
console.log（错误\u数据）
}
})
复合物
标准名称
价值
说明符
内政部
测量波长（未提供或未牵引时无测量波长）

{记录%中的记录的%s}
{{record.component}}
{{record.normalized_name}
{{record.value}}
{{record.specifier}}
{{record.doi}}
{{record.wavelength}}
{%endfor%}

如果我删除“在表中打印数据”部分，那么无论检索到多少数据，图表都可以成功绘制

---

如果有人能帮我发现代码中的问题，我将不胜感激，任何关于如何改进代码的建议都将非常有用。

请记住在询问时说出您正在使用的库（我想是ChartJS，但可能是其他内容）。无论如何，我试图从代码开始重现您的错误，但它甚至可以处理200多个数据和标签。您能提供更多细节吗？@Lykos94非常感谢您的回复。对不起，我没有提到图书馆。我对我的代码有了更多的发现。你能看看我帖子的“更新”吗？再次感谢！感谢您的更新，这次我再次尝试使用Django online IDE复制您的代码。。。它仍然有效。我在这里留下了一个链接，以便您可以检查它是否与您的代码/您想要实现的内容相似。请注意

template/main/index.html

和

main/views.py

文件。这是@Lykos94谢谢你的帮助。我仔细看了一下我的案例，发现如果输入的数据超过360，那么图表就不起作用。我还发现它与单元格的总数相关，也就是说，如果我只打印一列或两列，那么就可以打印出>500个数据。然而，当我把这个部分放在代码的底部，也就是上面时，它就工作了！因此，我猜结果是图表数据必须在页面完成加载后加载，即表格完成打印？这是否意味着我应该把一切都放在前面？谢谢如果是这种情况，请将脚本放入document.onload函数中，以确保所有内容都已加载。检查这个