chart.js使用

時間 2019-11-08

原文原文鏈接

chart.js是一個生成圖表的js插件,javascript

由於項目中有生成圖表的需求，看了下百度的echarts和chart.js，echarts很好用，文檔比較全blog也很多，仍是中文，不過在生成圖表用wkhhtmltopdf轉PDF的時候有兼容的問題，因此看了下chart.js
chart.js是分1.x和2.x版本的最新的版本是2.5.0，你們github下包的時候別下master分支包，下tags裏的。而後引入的時候別引入src下的chart.js :)，會報Uncaught ReferenceError : require is not defined 的錯誤。。，dist目錄纔是發佈目錄。。搞了半天，浪費時間。並且1.x和2.x的用法和options不同，這裏我主要調的2.x的版本
1.x的docs連接http://www.bootcss.com/p/chart.js/docs/
2.x的docs連接http://www.chartjs.org/docs/#scales-category-scale
兩個文檔都是英文的1.x的註釋是網上copy來的，2.x的幾個option本身加的，這塊中文資料比較少，還加了轉圖片的代碼，貌似圖表的大小是由canvas外的div決定的。css

又碰到兩個問題,一個是圖表適用retina屏的設置以下html

var myChart = echarts.init(document.getElementById('radar'),{
devicePixelRatio: 5 //devicePixelRatio是指設備的像素比，簡單來講就是設備物理像素和獨立像素的比例，應該是比例越高圖像越清晰
});java

不過這個設置用在PDF裏仍是不能高清顯示，換了一種方式將圖表轉換成高分辨率的圖片放到PDF裏，問題解決了git

var img = new Image();
img.src = myChart.getDataURL({
　　pixelRatio: 5,//圖片像素比
　　backgroundColor: '#fff'
});
$("#radar").html("").prepend(img);
$("#radar img").css({"width":"414px","height":"300px"});github

具體用法以下canvas

1.xecharts

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5     <title>chart.js 1.x</title>   
  6      <style>
  7      
  8     </style>
  9     
 10 </head>
 11 <script src="Chart.js-1.1.1/Chart.js"></script>
 12 <body>
 13 
 14 <!-- 展現canvas -->
 15 <div style="width:500px;height:500px;">
 16     <canvas id="myChart"></canvas>
 17 </div>
 18 <script type="text/javascript">
 19     var radarChartData = { 
 20         labels: ["星期一", "星期二", "星期三", "星期四", "星期五","星期六","星期日"], 
 21         datasets: [ 
 22             { 
 23                 label: "", 
 24                 fillColor: "rgba(0,0,0,0)", 
 25                 strokeColor: "rgba(0,0,0,0)", 
 26                 pointColor: "rgba(0,0,0,0)", 
 27                 pointStrokeColor: "rgba(0,0,0,0)", 
 28                 pointHighlightFill: "rgba(0,0,0,0)", 
 29                 pointHighlightStroke: "rgba(0,0,0,0)", 
 30                 data: [15,25,35,45,55,65,75]
 31             }
 32         ]
 33     }; 
 34 var options = {  
 35                   
 36     //Boolean - If we show the scale above the chart data             
 37     scaleOverlay : true,  
 38       
 39     //Boolean - If we want to override with a hard coded scale  
 40     scaleOverride : true,  
 41       
 42     //** Required if scaleOverride is true **  
 43     //Number - The number of steps in a hard coded scale  
 44     scaleSteps : 5,  
 45       
 46     //Number - The value jump in the hard coded scale  
 47     scaleStepWidth : 20,  
 48       
 49     // Y 軸的起始值  
 50     scaleStartValue : null,  
 51   
 52     // Y/X軸的顏色  
 53     scaleLineColor : "rgba(0,0,0,.1)",  
 54       
 55     // X,Y軸的寬度  
 56     scaleLineWidth : 1,  
 57   
 58     // 刻度是否顯示標籤, 即Y軸上是否顯示文字  
 59     scaleShowLabels : true,  
 60       
 61     // Y軸上的刻度,即文字  
 62     scaleLabel : "<%=value%>",  
 63       
 64     // 字體  
 65     scaleFontFamily : "'Arial'",  
 66       
 67     // 文字大小  
 68     scaleFontSize : 12,  
 69       
 70     // 文字樣式  
 71     scaleFontStyle : "normal",  
 72       
 73     // 文字顏色  
 74     scaleFontColor : "#666",      
 75       
 76     // 是否顯示網格  
 77     scaleShowGridLines : false,  
 78       
 79     // 網格顏色  
 80     scaleGridLineColor : "rgba(0,0,0,.05)",  
 81       
 82     // 網格寬度  
 83     scaleGridLineWidth : 2,   
 84       
 85     // 是否使用貝塞爾曲線? 即:線條是否彎曲  
 86     bezierCurve : false,  
 87       
 88     // 是否顯示點數  
 89     pointDot : true,  
 90       
 91     // 圓點的大小  
 92     pointDotRadius : 8,  
 93       
 94     // 圓點的筆觸寬度, 即:圓點外層白色大小  
 95     pointDotStrokeWidth : 2,  
 96       
 97     // 數據集行程  
 98     datasetStroke : true,  
 99       
100     // 線條的寬度, 即:數據集  
101     datasetStrokeWidth : 2,  
102       
103     // 是否填充數據集  
104     datasetFill : false,  
105       
106     // 是否執行動畫  
107     animation : true,  
108   
109     // 動畫的時間  
110     animationSteps : 60,  
111       
112     // 動畫的特效  
113     animationEasing : "easeOutQuart"   
114 }  
115 var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, options);
116 </script>
117 </body>
118 </html>

2.xide

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5     <title>chart.js 2.x</title>   
 6 </head>
 7 <body>
 8 <!-- 展現canvas -->
 9 <div style="width:500px;height:500px;" id="radar">
10     <canvas id="myChart"></canvas>
11 </div>
12 <!--引入 chartjs-->
13 <script src="Chart.js-2.4.0/dist/Chart.bundle.min.js"></script>
14 
15 
16 <script type="text/javascript">
17     // 設置數據和參數
18     var radarChartData = { 
19         labels: ["星期一", "星期二", "星期三", "星期四", "星期五","星期六","星期日"], 
20         datasets: [ 
21             { 
22                 pointBorderColor:"#C064A7",//描點顏色
23                 pointBackgroundColor:"#fff",//描點背景顏色
24                 borderColor:"#C064A7",//畫線顏色
25                 data: [15,25,35,45,55,65,75]
26             }
27         ]
28         
29     };
30     //設置選項
31     var options = {
32         legend:false,//數據項
33         scale: {
34             ticks: {
35                 beginAtZero: true,
36                 stepSize:20,//Y軸間隔
37                 max:100,//Y軸最大值
38                 min:0,
39                 callback:function(value) { return value + '%'; }//Y軸格式化
40             },
41             angleLines:{
42                 display:false//雷達輻射軸                
43             },
44             pointLabels:{
45                 fontSize:13//x軸文字
46             },
47             
48         },
49         animation:{
50             onComplete:function(){
51                 document.getElementById("radar").innerHTML = "<img src='" + myBarChart.toBase64Image() + "' />";
52             }
53         }
54     }
55     var ctx = document.getElementById("myChart").getContext("2d");
56     var myBarChart = new Chart(ctx, {type: 'radar',data: radarChartData,options:options});
57 </script>
58 </body>
59 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。