使用Chart.js来显示雷达图

aki发表于:2016年10月12日 17:37:45更新于:2019年02月01日 09:18:43
为了让kintone自定义开发更加有效且稳定,于2014年10月公开了 Cybozu CDN。本教程就来介绍一下如何使用Cybozu CDN 提供的 Chart.js来自定义。比如在打开kintone应用的记录详情页面时,如何用雷达图来显示成绩单。

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

完成图(kintone手机版)

00157feee2dc4461ded2192b81dbaa1

创建应用

字段设置及数据如下。

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

Radar
※元素ID

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

※用来显示图表的空白栏在输入数据的时候用不到,因此将它放到组合字段里。
※需在组合字段的设置页面勾选【显示组合内的字段】,否则可能不显示图表。

应用的表单设置页面

在这个页面添加用于统计各科目总分数及平均分的字段。

00157ff12703955dbb3a2c81930c0fe

从Cybozu CDN 里复制Chart.js的URL

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

https://js.cybozu.com/chartjs/v1.0.2/Chart.min.js
※本次使用的是2016年2月的Chart.js版本。

在应用管理页面设置URL

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

上传程序

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

/*
 * 雷达图的程序范例
 * Copyright (c) 2015 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
    "use strict";
    // 添加、编辑记录时的事件
    var eventsCreateShow = ['app.record.create.show', 'app.record.edit.show',
                            'app.record.index.create.show', 'app.record.index.edit.show'];
    kintone.events.on(eventsCreateShow, function(event) {
        // 将组合字段的"Chart"设为隐藏
        kintone.app.record.setFieldShown('Chart', false);
    });
    // 打开记录详情页面时显示图表(同时支持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: "My First dataset",
                    fillColor: "rgba(0,140,232,.4)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [
                        record['Chinese']['value'],
                        record['Mathematics']['value'],
                        record['English']['value'],
                        record['Social_studies']['value'],
                        record['Science']['value']
                    ]
                }
            ]
        };
        // 设置Chart.js的选项
        var options = {
            scaleShowLine: true,
            angleShowLineOut: true,
            scaleShowLabels: true,
            scaleBeginAtZero: true,
            angleLineColor: "rgba(0,0,0,.1)",
            angleLineWidth: 1,
            pointLabelFontFamily: "'Arial'",
            pointLabelFontStyle: "normal",
            pointLabelFontSize: 16,
            pointLabelFontColor: "#666",
            pointDot: true,
            pointDotRadius: 5,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 3,
            datasetFill: true,
            responsive: true
        };
        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")).Radar(data, options);
    });
})();

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

添加记录,确认雷达图。

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

 

00157feee2dc4461ded2192b81dbaa1 

 

00157feee7d3413087df57644e9bf8a

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

 

该Tips在2016年1月版中进行过确认。



    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复