JS4-3

by jiaxin520

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title> JavaScript Example 4-3</title>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="">
 </head>
 <body>
 <div>
  <canvas id="Line Chart"></canvas>
</div>
 <div>
  <canvas id="Bar Chart"></canvas>
</div>
 <div>
  <canvas id="Pie Chart"></canvas>
</div>
 
 </body>
 <!--引用JS -->
     <script src=""></script>
    <script type="text/javascript" src=""></script>

CSS

div{  
width:550px;
margin:40px auto;

border:1px solid rgba(	139, 0, 139,0.3);
border-radius:10px;
padding:40px;
}

JavaScript

//折線圖

let  LineChart = document.getElementById('Line Chart').getContext('2d');

 new Chart( LineChart, {
 type:'line',
 data:{
 		labels:['2024/05','2024/06','2024/07','2024/08','2024/09','2024/10','2024/11','2024/12'],
  
    datasets:[
    {
    label:'每月營收(億)',
    data:['2.49','10.58','6.55','2.94','1.57','2.81','	3.07','2.15'],
     borderColor: 'red', //線框顏色
    borderWidth:3,
    fill:false, // 線條下的顏色填充
    backgroundColor:'red', //線框內部顏色
    lineTension:0, // 線條變成直線顯示
    pointStyle:'star', // 變更點的形狀
    pointRadius:8,  //變更點的大小
    }
    ]
    },
 options:{
 scales:{  		//設置坐標軸
 		yAxes:[{
			ticks:{   //刻度
      suggestedMin:0,
      suggestedMax:10,
      } 
 }]
 },
 plugins: {
 		title:{
 			display:true,
      text:'鳴潮2024下半年營收',
      font:{
      size:36
      },
      padding:{
      top:20,
      bottom:5
      },
      },
      },
      animation:{    //線條動畫
      duration:2000,
      easing:'easeOutQuart',
      }
      }
      });
      //  棒狀圖
      let  BarChart = document.getElementById('Bar Chart').getContext('2d');
 let type= 'bar';
 let data = { labels:['2024/05','2024/06','2024/07','2024/08','2024/09','2024/10','2024/11','2024/12'],
  
    datasets:[
    {
    label:'每月營收(億)',
    data:['8.21','13.98','7.60','7.05','8.56','	10.59','	5.33','	6.00'],
     borderColor: 'red', //線框顏色
    borderWidth:3, //線條寬度
    fill:false, // 線條下的顏色填充
    backgroundColor:[
    'white',
    'orange',
    'blue',
    'green',
    'pink',
    'black',
    'grey',
    'brown',
    ], //線框內部顏色
    lineTension:0, // 線條變成直線顯示
    pointStyle:'star', // 變更點的形狀
    pointRadius:8,  //變更點的大小
   
    }
    ]
    };
 let options ={
  scales:{  		//設置坐標軸
 		yAxes:[{
			ticks:{   //刻度
      suggestedMin:0,
      suggestedMax:10,
      } 
 }]
 },
 plugins: {
 		title:{
 			display:true,
      text:'原神2024下半年營收',
      font:{
      size:36
      },
      padding:{
      top:30,
      bottom:20
      },
      },
      },
      animation:{    //線條動畫
      duration:2000,
   ...