軽量HTML5チャート描画ツールライブラリ「Chart.js」の使い方を詳しく解説

今回は、Chart.js 軽量 HTML5 グラフ描画ツール ライブラリの使用方法について詳しく説明します。Chart.js 軽量 HTML5 グラフ描画ツール ライブラリを使用する際の 注意事項 は何ですか?見てください。

手順:

html 部分:

<canvas id="myChart" width="400" height="400"></canvas>

javascript 部分:

1. Chart.js ファイルの導入;

2. チャートの作成: Chart オブジェクトをインスタンス化します (DOM ノードを取得し、2D コンテキスト環境を取得した後にインスタンス化します) ) ;

3. Chart オブジェクトをインスタンス化した後、特定の種類のグラフの作成を続けます;

折れ線グラフ:

html:

<canvas id="myChart" width="600" height="400"></canvas>

javascript:(概要と 2 つの使用方法)

<script src="js/Chart.min.js"></script>

<script type="text/javascript">
 //方式一：
 var ctx = document.getElementById("myChart").getContext("2d");;
 var MyNewChart = new Chart(ctx).Line(data); //这种方式是只加载数据集，（缺省options）不修改默认参数（简称法一）
 //数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };
</script>

データ構造:

//数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };

アイコンパラメータ:

Line.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,
  //是否用硬编码重写y轴网格线
  scaleOverride : false,
  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,
  //y轴每个刻度的宽度
  scaleStepWidth : 20,
  // Y 轴的起始值
  scaleStartValue : null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)", 
  // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: true,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
  // 文字大小
  scaleFontSize: 16,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth:2,
  // 是否使用贝塞尔曲线? 即:线条是否弯曲
  bezierCurve: true,
  // 是否显示点数
  pointDot: true,
  // 圆点的大小
  pointDotRadius:5,
  // 圆点的笔触宽度, 即:圆点外层白色大小
  pointDotStrokeWidth: 2,
  // 数据集行程(连线路径)
  datasetStroke: true,
  // 线条的宽度, 即:数据集
  datasetStrokeWidth: 2,
  // 是否填充数据集
  datasetFill: true,
  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  /*onAnimationComplete: null*/
  }

(Chart.jsに触れたばかりということもあり、チャートのパラメータを見て戸惑いましたが、全行程が英語でコメントされていました(笑) ~)

チャートを理解したら パラメータを追加した後、具体的な使用例を見てみましょう:

html部分とjsファイルの導入部分は省略されています: (以降のチャートの種類も省略されています) !)

<script type="text/javascript">
  //同样数据参数设置
  var data = {
  //折线图需要为每个数据点设置一标签。这是显示在X轴上。
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  //这边的thisId分别对应labels的id
   thisIds : [12,22,50,44,99,3,67],
  //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };
 window.onload = function() {
   var ctx = document.getElementById("myChart").getContext("2d");;
   //方式二：传入对象字面量去修改默认图标参数，自定义图表
   var MyNewChart = new Chart(ctx).Line(data, {
   // 网格颜色
   scaleGridLineColor: "rgba(255,0,0,1)",
   // Y/X轴的颜色
   scaleLineColor: "rgba(0,0,0,.1)",
   // 文字大小
   scaleFontSize: 16,
   // 文字颜色
   scaleFontColor: "#666",
   // 网格颜色
   scaleGridLineColor: "rgba(0,0,0,.05)",
   // 是否使用贝塞尔曲线? 即:线条是否弯曲
   // 是否执行动画
   animation: true,
   // 动画的时间
   animationSteps: 60,
   // 动画完成时的执行函数
   onAnimationComplete: function(){
    console.log("给x轴的lable对应的id：");
    console.log(data.thisIds);
   }
   });
  }
</script>

レンダリング:

棒グラフ:

new Chart(ctx).Bar(data,options);//简记，options可缺省

データ構造:

var data = {
 labels : ["January","February","March","April","May","June","July"],
 datasets : [
 {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  data : [65,59,90,81,56,55,40]
 },
 {
  fillColor : "rgba(151,187,205,0.5)",
  strokeColor : "rgba(151,187,205,1)",
  data : [28,48,40,19,96,27,100]
 }
 ]
}

アイコンパラメータ:

Bar.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,
  //是否用硬编码重写y轴网格线
  scaleOverride : false,
  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,
  //y轴每个刻度的宽度
  scaleStepWidth : null, 
  //Y轴起始值
  scaleStartValue: null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)",
   // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: false,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
   // 文字大小
  scaleFontSize: 12,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色 
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth: 1,
  //Bar Chart图表特定参数：
  //是否绘制柱状条的边框
  barShowStroke : true,
  //柱状条边框的宽度
  barStrokeWidth : 2,
  //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
  barValueSpacing :5,
  //每组柱状条组中柱状条之间的间距
  barDatasetSpacing :5,
  // 是否显示提示
  showTooltips: true, 
  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  onAnimationComplete: null
  }

JavaScriptの例

var barChart = new Chart(ctx).Bar(data, {
   scaleLabel: "$"+"<%=value%>",
   //是否绘制柱状条的边框
   barShowStroke: true,
   //柱状条边框的宽度
   barStrokeWidth: 2,
   //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
   barValueSpacing: 5,
   //每组柱状条组中柱状条之间的间距
   barDatasetSpacing: 5,
   });

レンダリング:

パイチャート:

javascript:

new Chart(ctx).Pie(data,options);

データ構造:

var data=[
  {
  value:40,
  color:"#21F0EA",//背景色
  highlight:"#79E8E5",//高亮背景颜色
  label:'javascript'//文字标签
  },{
  value:60,
  color:"#E0E4CC",
  highlight:"#EAEDD8",
  label:'jquery'
  },{
  value:100,
  color:"#69D2E7",
  highlight:"#83E5F7",
  label:'html'
  }
 ];

アイコンパラメータ:

Pie.defaults = {
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //心啊是每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 火动画完成时执行的函数
   onAnimationComplete : null
  }

いくつかのJavaScriptの例:

var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 动画完成时执行的函数
   //onAnimationComplete : null
  });

レンダリング:

ドーナツ チャート:

javascript:

new Chart(ctx).Doughnut(data,options);

データ構造:

//数据结构（与饼图相似）
  var data = [{
  value: 30,
  color: "#F7464A",
  highlight: "#FA7C7C",
  label: "angularJS"
  }, {
  value: 50,
  color: "#E2EAE9",
  highlight: "#F2F5F5",
  label: "juqery"
  }, {
  value: 100,
  color: "#D4CCC5",
  hightlight: "#DBD6D1",
  label: "javascript"
  }, {
  value: 40,
  color: "#949FB1",
  highlight: "#AFBCCE",
  label: "nodeJS"
  }, {
  value: 120,
  color: "#4D5360",
  highlight: "#767C86",
  label: "html"
  }];

アイコンパラメータ:

Doughnut.defaults={
   //是否显示每段行程（即环形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke: true,
   //设置每段行程的边框颜色
   segmentStrokeColor: "#fff",
   //设置每段环形的边框宽度
   segmentStrokeWidth: 2,
   //图标中心剪切圆的比例（0为饼图，接近100则环形宽度越小）
   percentageInnerCutout: 50,
   //是否执行动画
   animation: true,
   //执行动画时间
   animationSteps: 100,
   //动画特效
   animationEasing: "easeOutBounce",
   //是否旋转动画
   animateRotate: true,
   //是否缩放图表中心
   animateScale: true,
   //动画完成时的回调函数
//   onAnimationComplete: null
  }

レンダリング:

Chart.js には合計 6 つのチャートがあります: さらに、残りの 2 つのタイプがあります: レーダー チャートまたはスパイダー チャート、および極地読者は、Chart.js の中国語ドキュメントを参照してください

そこで質問です。 ?チャートの凡例についてはどうですか？この製品はアプリケーションでも非常によく使用されています。いろいろ探した結果、レジェンド部分を実装する方法を見つけました。すべての偉大な神々に敬意を表しましょう。さらに、各データ セットを手動で表示する代わりに、アニメーションの完了後に各データ セットを自動的に表示することもできます。

コードの各部分に直接移動します:

html 部分:

<h2>柱状图</h2>
<canvas id="barChart" width="400" height="300"></canvas>
<!--这里添加了用来放置图例的p标签-->
<p id="legend"></p>

css 部分: (基本スタイルを設定しない場合、期待した効果が得られない可能性があります)

 <style>
  ul,li{
  list-style-type:none;;
  }
  ul>li{
  margin:5px auto;
  font-family: "微软雅黑";
  }
  span{
  display: inline-block;
  width:20px;height:20px;line-height: 20px;
  vertical-align:middle;
  margin-right:5px;
  }
 </style>

javascript 部分:

window.onload = function() {
   var ctx = document.getElementById("barChart").getContext("2d");
   var barChart = new Chart(ctx).Bar(data, {
   showTooltips: false, // 是否显示提示,这里需要设置为false
   //模板
   legendTemplate: 
   '<ul class=\"<%=name.toLowerCase()%>-legend\">'+
   '<% for (var i=0; i<datasets.length; i++){%>'+
   '<li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span>'+
   '<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>'+
   '<%}%>'+
   '</ul>',
   onAnimationComplete: function() {//动画完成后显示对应的数据
    var ctx = this.chart.ctx;
    ctx.font = this.scale.font;
    ctx.fillStyle = this.scale.textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.datasets.forEach(function(dataset) {
    dataset.bars.forEach(function(bar) {
     ctx.fillText(bar.value, bar.x, bar.y);
    });
    });
   }
   });
   var legend = document.getElementById('legend');
   // 图例
   legend.innerHTML = barChart.generateLegend();
  }
 //数据结构：
  var data = {
  labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)",
   strokeColor: "rgba(220,220,220,1)",
   data: [65, 59, 90, 81, 56, 55, 40],
   label: "本月销售额"//图例标签
  },{
   fillColor: "#69D2E7",
   strokeColor: "#B2E5ED",
   data: [54, 99, 72, 61, 86, 65, 84],
   label: "本季度销售额"
  }]
  };

レンダリング:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

PHPを使用してWeChatミニプログラムの顔認識と顔スワイプログインを実装する方法

文字化けした中国語パラメータを送信するjQueryリクエストを迅速に解決する方法

以上が軽量HTML5チャート描画ツールライブラリ「Chart.js」の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。