WorldPress 文章中插入Chars 图表 之amcharts篇

646
   
| 何军
| 2条评论
| 2021年4月15日

原理：使用wordpress 插入自定义 html

在一段HTML 代码段中 ，引入相关库的js,再定义页面元素，再写一段 应用js

示例：

相关全部代码：

<html>
  <head>
    <script src = "http://www.amcharts.com/lib/4/core.js"></script>
    <script src = "http://www.amcharts.com/lib/4/charts.js"></script>
  </head>
  <body>
    <div id="$CHART$" style="width: 100%; height: 300px;"></div>
  
    <script>
       // Create chart instance
   	 	var chart = am4core.create("$CHART$", am4charts.RadarChart);

        // Make the chart fade-in on init
        chart.hiddenState.properties.opacity = 0;

        // Set data
        chart.data = [{
          "direction": "N",
          "value": 8
        }, {
          "direction": "NE",
          "value": 9
        }, {
          "direction": "E",
          "value": 4.5
        }, {
          "direction": "SE",
          "value": 3.5
        }, {
          "direction": "S",
          "value": 9.2
        }, {
          "direction": "SW",
          "value": 8.4
        }, {
          "direction": "W",
          "value": 11.1
        }, {
          "direction": "NW",
          "value": 10
        }]

        // Set chart padding
        chart.padding(10, 10, 10, 10);

        // Set up axers
        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.dataFields.category = "direction";
        categoryAxis.renderer.minGridDistance = 60;

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        // Add series
        var series = chart.series.push(new am4charts.RadarSeries());
        series.dataFields.categoryX = "direction";
        series.dataFields.valueY = "value";
        series.tooltipText = "{valueY.value}"
        series.fillOpacity = 0.4;

        // Add cursor
        chart.cursor = new am4charts.RadarCursor();

    </script>
  </body>
</html>

官网demo 地址： https://www.amcharts.com/demos/

WorldPress