amCharts粒狀梯度柱形圖

DogLeftover發表於2024-04-26
梯度
  • 程式碼案例
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
    <style>
        #chartdiv {
          width: 600PX;
          height: 350px;
        }
    </style>
  </head>
  <body>
    <div id="chartdiv"></div>
    <script>
        am5.ready(function() {
        
        // Create root element
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var root = am5.Root.new("chartdiv");

        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root)
        ]);

        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
          panX: true,
          panY: true,
          wheelX: "panX",
          wheelY: "zoomX",
          pinchZoomX: true,
          paddingLeft:0,
          layout: root.verticalLayout
        }));
        
        chart.set("colors", am5.ColorSet.new(root, {
          colors: [
            am5.color(0x73556E),
            am5.color(0x9FA1A6),
            am5.color(0xF2AA6B),
            am5.color(0xF28F6B),
            am5.color(0xA95A52),
            am5.color(0xE35B5D),
            am5.color(0xFFA446)
          ]
        }))
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xRenderer = am5xy.AxisRendererX.new(root, {
          minGridDistance: 50,
          minorGridEnabled: true
        });
        
        xRenderer.grid.template.setAll({
          location: 1
        })
        
        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
          maxDeviation: 0.3,
          categoryField: "country",
          renderer: xRenderer,
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
          maxDeviation: 0.3,
          min: 0,
          renderer: am5xy.AxisRendererY.new(root, {
            strokeOpacity: 0.1
          })
        }));

        // Create series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
          name: "Series 1",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value",
          categoryXField: "country",
          tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
          }),
        }));
        
        series.columns.template.setAll({
          tooltipY: 0,
          tooltipText: "{categoryX}: {valueY}",
          shadowOpacity: 0.1,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          shadowBlur: 1,
          strokeWidth: 2,
          stroke: am5.color(0xffffff),
          shadowColor: am5.color(0x000000),
          cornerRadiusTL: 50,
          cornerRadiusTR: 50,
          fillGradient: am5.LinearGradient.new(root, {
            stops: [
              {}, // will use original column color
              { color: am5.color(0x000000) }
            ]
          }),
          fillPattern: am5.GrainPattern.new(root, {
            maxOpacity: 0.15,
            density: 0.5,
            colors: [am5.color(0x000000), am5.color(0x000000), am5.color(0xffffff)]
          })
        });

        series.columns.template.states.create("hover", {
          shadowOpacity: 1,
          shadowBlur: 10,
          cornerRadiusTL: 10,
          cornerRadiusTR: 10
        })
        
        series.columns.template.adapters.add("fill", function (fill, target) {
          return chart.get("colors").getIndex(series.columns.indexOf(target));
        });
        
        // Set data
        var data = [{
          country: "USA",
          value: 2025
        }, {
          country: "China",
          value: 1282
        }, {
          country: "Japan",
          value: 909
        }, {
          country: "Germany",
          value: 752
        }, {
          country: "UK",
          value: 652
        }, {
          country: "Italy",
          value: 452
        }];
        
        xAxis.data.setAll(data);
        series.data.setAll(data);
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>
  </body>
</html>
  • 效果圖
點選檢視詳情

相關文章