amChart 未在 Laravel Blade 文件中呈现答案

【问题标题】：amChart not rendering in Laravel Blade fileamChart 未在 Laravel Blade 文件中呈现
【发布时间】：2020-10-03 10:27:32
【问题描述】：

我是新的 amchart 并试图在我的 Laravel（PHP 框架）项目中显示可视化。在同一个chartJs 中得到显示。但是 AmChart 不工作。

下面是chart.blade.php的可视化页面。

  <!-- AmCharts Resources -->
  <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<body>

<div class="card">
   <div class="card-header">
     <h6>AmChart</h6>
   </div>
   <div class="card-body">
     <canvas id="chartdiv" width="341" height="253" style="display: block; width: 341px; height: 253px;">/canvas>
   </div>
</div>



 <script src="{{URL::asset('js/charts/demo.js')}}"></script>

</body>

js/charts/demo.js是

// Create chart instance in one go
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Create pie series
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();

console.log(chart.data);

我正在从 Chrome 获取控制台日志中的 JSON 数据。

感谢您的时间和考虑。

【问题讨论】：

标签： javascript html laravel amcharts

【解决方案1】：

将<canvas id="chartdiv"></canvas> 替换为<div id="chartdiv"></div>

【讨论】：