ChartJs-角线和刻度在“顶部”

时间:2018-07-24 11:40:20

标签: chart.js

我有一个如下图所示的图表。我有两个期望,首先,因为您可以看到转储数据集的背景色后面隐藏有刻度号(1,2,3,4,5)(我需要该背景色,所以才使用假数据集)。我需要向他们展示使用z-index之类的东西。我用红色写了刻度号作为样本。

第二,我还需要在顶部显示角度线。

var test2 = [2, 2, 2, 2, 2];
var test3 = [3, 3, 3, 3, 3];
var test4 = [4, 4, 4, 4, 4];
var test5 = [5, 5, 5, 5, 5];

new Chart(document.getElementById("myChart"), {
            type: 'radar',
            data: {
                labels: sectionDescriptions,
                datasets: [  
                    {
                        label: "2050",
                        fill: true,
                        borderColor: "rgba(0,0,0,1)",
                        borderWidth: "4",
                        pointRadius: 3,
                        pointBorderWidth: 3,
                        pointBackgroundColor: "cornflowerblue",
                        pointBorderColor: "rgba(0,0,200,0.6)",
                        pointHoverRadius: 10,
                        data: sectionPoints
                    },
                    {
                        radius: 0,
                        fill: true,
                        backgroundColor: "rgba(240,0,0,1)",                        
                        data: test2
                    },
                    {
                        radius: 0,
                        fill: true,
                        backgroundColor: "rgba(255,190,4,1)",
                        data: test3
                    },
                    {
                        radius: 0,
                        fill: true,
                        backgroundColor: "rgba(255,250,5,1)",                        
                        data: test4
                    },
                    {
                        radius: 0,
                        fill: true,
                        backgroundColor: "rgba(0,180,233,1)",
                        data: test5
                    }                    
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'Chart'
                },
                scale: {
                    gridLine: {
                        color : "white"
                    },
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 5,
                        stepSize: 1,
                        fontColor: 'black',
                        backDropColor: 'black'
                    },
                    pointLabels: {
                        fontSize: 13,
                        //fontStyle: 'bold'
                    }
                },
                legend: {
                    display: false
                }
            }
        });

chartjs

0 个答案:

没有答案