2021-008 使用Julia製造數據動圖amcharts

str1="中文"

str_html="""

<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>

<div id="chartdiv"></div>

<style>

body {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

#chartdiv {

  width: 100%;

  height: 600px;

}

</style>

<script>

/**

 * ---------------------------------------

 * This demo was created using amCharts 4.

 * 

 * For more information visit:

 * https://www.amcharts.com/

 * 

 * Documentation is available at:

 * https://www.amcharts.com/docs/v4/

 * ---------------------------------------

 */

// Themes begin

am4core.useTheme(am4themes_animated);

// Themes end

var chart = am4core.create("chartdiv", am4charts.RadarChart);

chart.data = [{

 "country": "$(str1)",

 "visits": 2025

}, {

 "country": "China",

 "visits": 1882

}, {

 "country": "Japan",

 "visits": 1809

}, {

 "country": "Germany",

 "visits": 1322

}, {

 "country": "UK",

 "visits": 1122

}, {

 "country": "France",

 "visits": 1114

}, {

 "country": "India",

 "visits": 984

}, {

 "country": "Spain",

 "visits": 711

}, {

 "country": "Netherlands",

 "visits": 665

}, {

 "country": "Russia",

 "visits": 580

}, {

 "country": "South Korea",

 "visits": 443

}, {

 "country": "Canada",

 "visits": 441

}];

chart.innerRadius = am4core.percent(40)

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

categoryAxis.renderer.grid.template.location = 0;

categoryAxis.dataFields.category = "country";

categoryAxis.renderer.minGridDistance = 60;

categoryAxis.renderer.inversed = true;

categoryAxis.renderer.labels.template.location = 0.5;

categoryAxis.renderer.grid.template.strokeOpacity = 0.08;

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

valueAxis.min = 0;

valueAxis.extraMax = 0.1;

valueAxis.renderer.grid.template.strokeOpacity = 0.08;

chart.seriesContainer.zIndex = -10;

var series = chart.series.push(new am4charts.RadarColumnSeries());

series.dataFields.categoryX = "country";

series.dataFields.valueY = "visits";

series.tooltipText = "{valueY.value}"

series.columns.template.strokeOpacity = 0;

series.columns.template.radarColumn.cornerRadius = 5;

series.columns.template.radarColumn.innerCornerRadius = 0;

chart.zoomOutButton.disabled = true;

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set

series.columns.template.adapter.add("fill", (fill, target) => {

 return chart.colors.getIndex(target.dataItem.index);

});

setInterval(()=>{

 am4core.array.each(chart.data, (item)=>{

   item.visits *= Math.random() * 0.5 + 0.5;

   item.visits += 10;

 })

 chart.invalidateRawData();

}, 2000)

categoryAxis.sortBySeries = series;

chart.cursor = new am4charts.RadarCursor();

chart.cursor.behavior = "none";

chart.cursor.lineX.disabled = true;

chart.cursor.lineY.disabled = true;</script>

"""

HTML(str_html)