Google Charts

HTML

<html>  <head>    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    <script type="text/javascript">
   google.charts.load('current', {'packages':['corechart']});      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([          ['公司', '分店數'],          ['BI公司', 490],          ['對手A', 420],          ['對手B', 370],          ['對手C', 530],          ['對手D', 380],          ['對手E', 310]        ]);
        var options = {          title: 'BI公司與競爭企業市佔率'        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);      }

    </script>  </head>  <body>    <div id="piechart" style="width: 1300px; height: 600px;"></div>  </body></html>

Google Bar Chart & HTML 公司營運成本清單

<html>  <head>    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    <script type="text/javascript">      google.charts.load('current', {'packages':['bar']});      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {        var data = google.visualization.arrayToDataTable([          ['支出項目', '1月', '2月', '3月'],        ['銷貨成本', 1100394, 1300537, 1500224],        ['薪資', 815750, 845407, 870828],        ['房租', 185681, 185550, 185009],        ['折舊', 100655, 100327, 100920],        ['出差費', 60932, 80091, 100256]        ]);
        var options = {          chart: {            title: '公司營運成本清單',            subtitle: '紀錄區間: 1月至3月(第一季)',          },

hAxis: {          title: '支出金額'},          bars: 'horizontal' // Required for Material Bar Charts.        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));      }    </script>  </head>  <body>    <div id="barchart_material" style="width: 900px; height: 500px;"></div>  </body></html>