使用Chart.js来显示雷达图

今天介绍一下如何使用Cybozu CDN 提供的 Chart.js来自定义。比如在打开kintone应用的记录详情页面时，如何用雷达图来显示成绩单。

※Chart.js是JavaScript库，除了雷达图，还可创建饼图、折线图、柱形图。

完成图（kintone手机版）

 

创建应用

字段设置及数据如下：

应用的表单设置页面

 

Cybozu CDN 里复制Chart.js的URL

打开Cybozu CDN 的页面，复制Chart.js 的URL。

https://js.cybozu.cn/chartjs/v3.5.1/Chart.min.js
※本次使用的是截止至2021年10月的Chart.js版本。

在应用管理页面设置URL

打开要进行自定义的应用的管理页面，然后打开“通过JavaScript/CSS 自定义”。点击“JavaScript文件（电脑专用）”下的“通过URL添加”，粘帖刚才复制的URL。
※如果希望kintone手机上也可以显示，“JavaScript文件（智能手机专用）”也需要进行同样设置。到这里CDN的设置就完成了。但是这样还不能生成图表，需要上传程序。

上传程序

在“通过JavaScript/CSS 自定义”页面，将以下程序保存到JavaScript格式的文件，上传。
关于Chart.js的功能及规格，请参考提供方的网站。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

/*  * 雷达图的程序范例  * Copyright (c) 2021 Cybozu  *  * Licensed under the MIT License  */ (function() {   'use strict';   // 打开记录详情页面时显示图表（同时支持PC、移动端）   var eventsDetailShow = ['app.record.detail.show', 'mobile.app.record.detail.show'];   kintone.events.on(eventsDetailShow, function(event) {     var record = event.record;     var data = {       labels: ['语文', '数学', '英语', '社会', '理科'],       datasets: [         {           label: '分数',           backgroundColor: 'rgba(0,140,232,.4)',           borderColor: 'rgba(151,187,205,1)',           pointBackgroundColor: 'rgba(151,187,205,1)',           pointBorderColor: '#fff',           data: [             record.Chinese.value,             record.Mathematics.value,             record.English.value,             record.Social_studies.value,             record.Science.value           ]         }       ]     };     // 设置Chart.js的选项     var options = {       responsive: true,       // 设置雷达图的最小值和最大值       scale: {         min: 0,         max: 100       }     };     var elRadar;     var elCanvas = document.createElement('canvas');     elCanvas.id = 'canvas';     // 在空白栏字段中显示雷达图（也兼容移动端）     // 显示时根据PC和移动端自动调整大小     if (event.type === 'mobile.app.record.detail.show') {       elRadar = kintone.mobile.app.getHeaderSpaceElement();       elCanvas.style.position = 'relative';       elCanvas.style.top = '10px';       elCanvas.style.left = '10px';       elCanvas.height = '300';       elCanvas.width = '300';     } else {       elRadar = kintone.app.record.getSpaceElement('Radar');       elCanvas.height = '400';       elCanvas.width = '400';     }     elRadar.appendChild(elCanvas);     var myChart = new Chart(elCanvas.getContext('2d'), {       type: 'radar',       data: data,       options: options     });   }); })();

试着添加一条记录，确认雷达图

添加记录，确认雷达图。

 

像这样，使用Cybozu CDN可以进行高效又稳定的自定义。

更多自定义请查看：开发者网站