Javascript 在图表JS生成的图形中绘制数据

下午好。 我正在使用Chart JS，并试图在条形图中显示每列的现有总数

在后端，我使用Laravel作为框架，通过

$datacount

变量从控制器传递数据

这是我在控制器中的查询：

$datacount = DB::table('topics')
            ->leftJoin('proposals_topics', 'topics.id', '=', 'proposals_topics.topic_id')
            ->select('topics.name as tpcname', 'proposals_topics.topic_id', \DB::raw('count(topic_id) as total'))
            ->groupBy('topics.name', 'proposals_topics.topic_id')
            ->orderBy('topic_id', 'desc')
            ->get();

我在此脚本中收到的变量的数据：

<script>
   var datacount = <?= json_encode($datacount, JSON_PRETTY_PRINT); ?>;

   console.log(datacount);

   // Bar chart
   new Chart(document.getElementById("bar-chart"), {
       type: 'bar',
       data: {
       labels: ["Compras y Contrataciones", "Acceso a la Información", "Educación", "Organismos de Control", "Servicio Civil", "Infraestructura", "Energía", "Gestión Financiera", "Salud", "Agua"],
       datasets: [
           {
           label: "Cantidad generada",
           backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#ffc344","#ff8e17", "#ff4cd8","#ffea4c","#b7ff4c"],
           data: [datacount.total]
           }
       ]
       },
       options: {
       legend: { display: false },
       title: {
           display: true,
           text: 'Datos generados por eje temático.'
       }
       }
    });
</script>

var-datacount=；
console.log（数据计数）；
//条形图
新图表（document.getElementById（“条形图”）{
类型：'bar'，
数据：{
标签：[“合同内容”、“信息披露”、“教育”、“控制组织”、“民事服务”、“基础设施”、“能源”、“金融管理”、“Salud”、“Agua”]，
数据集：[
{
标签：“Cantidad generada”，
背景色：[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”、“ffc344”、“ff8e17”、“ff4cd8”、“FFA4C”、“FF4C”、“FF4C”]，
数据：[datacount.total]
}
]
},
选项：{
图例：{display:false}，
标题：{
显示：对，
文字：“Datos generados por eje temático。”
}
}
});

我正在控制台中接收结果，但无法显示阵列的数据

---

您可以使用以下命令将PHP脚本中的数据放入数据字段：

在阅读了一些关于Laravel文档和Javascript的内容后，我找到了一个在图形上绘制数据的解决方案

在这个脚本中，我基于上的循环文档构建了foreach

//console.log（数据计数）；
//条形图
新图表（document.getElementById（“条形图”）{
类型：'bar'，
数据：{
标签：[
@foreach（$datacount作为$dt）
“{{$dt->tpname}}”，
@endforeach
],
数据集：[
{
标签：“Cantidad generada”，
背景色：[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”、“ffc344”、“ff8e17”、“ff4cd8”、“FFA4C”、“FF4C”、“FF4C”]，
数据：[
@foreach（$datacount作为$dt）
{！！$dt->total！！}，
@endforeach
],
}
]
},
选项：{
图例：{display:false}，
标题：{
显示：对，
文字：“我是一个专业的学生。”
}
}
});

还可以看到以下示例：

---

必须使用foreach，但我无法绘制数据。

<script>        
  //console.log(datacount);

  // Bar chart
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
      labels: [
          @foreach($datacount as $dt)
              "{{ $dt->tpname }}",
          @endforeach
      ],
      datasets: [
          {
          label: "Cantidad generada",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#ffc344","#ff8e17", "#ff4cd8","#ffea4c","#b7ff4c"],
              data: [
                  @foreach($datacount as $dt)
                      {!! $dt->total !!},
                  @endforeach
              ],
           }
      ]
      },
      options: {
      legend: { display: false },
      title: {
          display: true,
          text: 'Ejes temáticos por cantidad de propuestas.'
      }
      }
    });
</script>