css - 我自己在 Kintone 中为图形定义的颜色

Question

我想为 Kintone 中出现的图形设置我自己定义的颜色。

我发现对于饼图，您可以将下面的 CSS 代码上传到应用程序，让饼图的某些区域变成您选择的颜色。

.highcharts-series-group .highcharts-series path:nth-of-type(even){
    fill:pink;
}

不过，我真正想做的是将同样的事情应用到 kintone 的折线图中。我试过下面的 CSS:

.highcharts-tracker path {
    fill: red;
}

这只会更改图表上绘制的点，但不会更改点之间的线。我如何识别此图中的线，以便最终得到我选择的颜色线？

Answer 1

2018 年 6 月 24 日更新

正如您提到的，我向您展示的代码仅显示在记录详细信息页面上。但是，如果您只是让流程在记录列表事件“app.record.index.show”上运行，则可以在记录列表页面的顶部显示图表。

另外，最好使用kintone.app.getHeaderSpaceElement()在记录列表页面附加一个图形。

以下页面是如何使用 kintone.app.getHeaderSpaceElement() 在记录列表页面上附加内容的示例:

kintone开发者网络-kintone x OpenStreetMap
https://developer.kintone.io/hc/en-us/articles/115003669514

下一页是关于记录列表头元素的:

kintone开发者网-获取记录列表头元素
https://developer.kintone.io/hc/en-us/articles/213148937-Get-Record-List#getHeaderSpaceElement

============================================= ==
原始回复

最好不要编辑 DOM，因为在任何 kintone 更新后它可能无法工作。我建议使用 javscript 库 Chart.js 创建自定义图表。以下页面可帮助您执行此操作。

示例代码

(function() {
    "use strict";

// Events for adding and editing records
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) {
    // Hide the "Chart" Group field
    kintone.app.record.setFieldShown('Chart', false);

});

// Display the chart on the record details page (PC and mobile)
var eventsDetailShow = ['app.record.detail.show', 'mobile.app.record.detail.show'];
kintone.events.on(eventsDetailShow, function(event) {

    var record = event.record;
    var data = {
        labels: ["Language Arts", "Math", "Science", "Social Studies", "P.E."],
        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['language_arts']['value'],
                    record['math']['value'],
                    record['science']['value'],
                    record['social_studies']['value'],
                    record['pe']['value']
                ]
            }
        ]
    };

    // Set Chart.js options
    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';

    // Display radar chart onto the Blank space
    // Edit display size depending on PC or mobile
    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开发者网-用chart.js显示雷达图
https://developer.kintone.io/hc/en-us/articles/115006413388-Display-radar-charts-with-chart-js

希望对你有帮助