使用Chart.js来显示雷达图

aki发表于:2016年10月12日 17:37:45更新于:2022年07月27日 10:38:08

开发者中心包含此范例模板(显示雷达图),请前往开发者中心下载学习。


为了让kintone自定义开发更加有效且稳定,于2014年10月公开了 Cybozu CDN。本教程就来介绍一下如何使用Cybozu CDN 提供的 Chart.js来自定义。比如在打开kintone应用的记录详情页面时,如何用雷达图来显示成绩单。

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

完成图(kintone手机版)

00157feee2dc4461ded2192b81dbaa1

创建应用

字段设置及数据如下。

字段名称字段代码字段类型
名字Name单行文本框张三

Radar
※元素ID

--空白栏--
语文Chinese数值80
数学Mathematics数值90
英语English数值100
社会Social_studies数值60
理科Science数值70


应用的表单设置页面

001615fe898c75748f14380943376fa

从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的功能及规格,请参考提供方的网站。

/*
 * 雷达图的程序范例
 * 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
    });

  });
})();

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

添加记录,确认雷达图。

在kintone移动端(智能手机)中确认在PC浏览器上确认

 

00157feee2dc4461ded2192b81dbaa1 

 

00157feee7d3413087df57644e9bf8a

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

该Tips在2021年9月版中进行过确认。