Create dynamic chart with ApexCharts.js

bysemicon -
0

 APEXCHARTS.JS



ส่วนของ CDN

สคริปต์ apexcharts.js จาก CDN ให้เพิ่มลงในแท็ก <head></head>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

ส่วนแสดงผล

สร้างแท็ก div สำหรับใช้แสดงแผนภูมิ

<div id="chart"></div>

ส่วนของสคริปต์กําหนดค่าต่างๆ

นำโค้ดด้านล่าง ไปวางเหนือแท็ก </body>

<script>
      
        var options = {

          /** Data sets **/
          series: [{
            /** data bar 1 **/
            // Category name
            name: 'Net Profit',
            // Data set
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
          }, {
            /** data bar 2 **/
            name: 'Revenue',
            data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
          }, {
            /** data bar 3 **/
            name: 'Free Cash Flow',
            data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
          }],

        /** chart type **/
        chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          /** chart option **/
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          /** label x **/
          categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
        },
        yaxis: {
          /** label y **/
          title: {
            text: '$ (thousands)'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "$ " + val + " thousands"
            }
          }
        }
      };

       /** Render chart */
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();

  </script>

เมื่อทดสอบโปรแกรมคุณควรได้แผนภูมิดังนี้:




ตัวอย่างโค้ดเต็ม

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Apexcharts</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- cdn apexcharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

  </head>
  <body>
    <h1>Apexcharts</h1>

    <!-- Show chart -->
    <div>
        <div id="chart"></div>
    </div>
    
    <script>
        /** Call function */
        createChart ()
        
        function createChart (){
            var options = {

                /** Data set **/
                series: [{
                    /** data bar 1 **/
                    name: 'Net Profit',
                    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
                }, {
                    /** data bar 2 **/
                    name: 'Revenue',
                    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
                }, {
                    /** data bar 3 **/
                    name: 'Free Cash Flow',
                    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
                }],

                /** chart type **/
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    /** chart option **/
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    /** label x **/
                    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                },
                yaxis: {
                    /** label y **/
                    title: {
                        text: '$ (thousands)'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "$ " + val + " thousands"
                        }
                    }
                }
            };
            
            /** render chart **/
            var chart = new ApexCharts(document.querySelector("#chart"), options);
                chart.render();

        }
      </script>
   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>



Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า