amChart 未在 Laravel Blade 文件中呈现

Question

我是 amchart 新手，正在尝试在我的 Laravel（PHP 框架）项目中显示可视化。在同一个图表中，Js 正在显示。但是 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);

I am getting JSON data on console log from Chrome.

感谢您的时间和考虑。

Answer 1

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

amChart 未在 Laravel Blade 文件中呈现

amChart not rendering in Laravel Blade file

html

javascript

amcharts

laravel