Try apexcharts.js

by cactus77kiki

HTML

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

<h3>[長條圖]</h3>
<div id="chart_bar" class="apexchartstyle"></div>
<h3>[長條+折線圖]</h3>
<div id="chart_double" class="apexchartstyle"></div>
<h3>[折線+折線圖]</h3>
<div id="chart_doubleline" class="apexchartstyle"></div>

CSS

body {
  font-family: Roboto, sans-serif;
}

/*可依據id,或class設定*/
.apexchartstyle {
  max-width: 650px;
  margin: 35px auto;
}

/* 資源1: 簡介
2021年js library of data visualization: https://www.monterail.com/blog/javascript-libraries-data-visualization
簡介: https://kknews.cc/zh-tw/code/qlyjopr.html
*/

/* 資源2: 如何使用
github: https://github.com/apexcharts/apexcharts.js
官方範例(依據不同需要繪製之圖表):https://apexcharts.com/docs/chart-types/line-chart/  
官方文件-圖表相關設定: https://apexcharts.com/docs/options/stroke/
*/

/* 資源3:example
bar chart: https://jsfiddle.net/wxzpk9dn/2/
ofiicial: https://codepen.io/apexcharts
*/

/* 資源4:vue+apexcharts
中文介紹: https://madewith.cn/741
*/

JavaScript

/*長條圖:單一data*/
var options1 = {
  chart: {
    type: 'bar'
  },
  series: [{
    //name: 'sales',
    name: '成本-2020',	//中文ok
    data: [30,40,45,50,49,60,70,91,180]	//自動判斷y軸級距
  },  
  ],
  xaxis: {
    //categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
    categories: ['2020/01月','2020/02月','2020/03月','2020/04月','2020/05月',
     '2020/06月','2020/07月', '2020/08月','2020/09月']
  }
}
var chart1 = new ApexCharts(document.querySelector("#chart_bar"), options1);
chart1.render();

/*長條+折線圖*/
var options2 = {
	series: [{   
    name: '成本-2020',
    type: 'column',
    data: [30,40,45,50,49,60,70,91,180]	//自動判斷y軸級距
  },  
  {    
    name: '成本-2021',
    type: 'line',
    data: [100,20,55,80,29,20,10,101,170]
  }
  ],
	chart: {
          height: 350,
          type: 'line',
        },
        stroke: {
          width: [0, 3]	//本line chart線條粗細;數值越大越粗
        },
        title: {
          text: 'Cost Data'	//圖表名稱(todo:是否可調整大小??)
        },
        dataLabels: {
          enabled: true,	//本line chart是否顯示資料點標籤(true:顯示)(ex:100,20...)
          enabledOnSeries: [1]	//對應的series資料集index(本例:第二組資料)
        },
        //labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],	
        labels: ['Jan','Feb','Mar','Apr','May',
     'Jun','Jul', 'Aug','Sep'],
        xaxis: {
          //type: 'datetime'	//上述labels若值為'01 Jan 2001'會顯示為: Jan '01.
          type: 'text'	//純文字  //上述labels若值為'01 Jan 2001'會顯示為: 01 Jan 2001.
        },
        yaxis: [{
          title: {
            text: '成本-2020',
          },
        
        }, {
          opposite: true,
          title: {
            text: '成本-2021'
          }
        }]
}
var chart2 = new ApexCharts(document.querySelector("#chart_double"), options2);
chart2.render();

/*折線+折線圖*/
var options3 = {
          series: [
          {
            name: '成本-2020',    
    				data:...