ChartJS 雷达图雷达线颜色?

所以我对此进行了很多研究,但没有找到解决方案,我想改变雷达线的颜色,如下所示:

http://img.mukewang.com/628ee4910001a16e09580936.jpg

有没有办法做到这一点?


这是我当前的代码:


new Chart(document.getElementById("result_chart"), {

    "type": "radar",

    "data": {

        "labels": ["Idea", "Timing", "Skills", "Concept", "Market Plan", "MVP", "Revenue Potential", "Competition", "Team", "BMC", "Financial Model"],

        "datasets": [{

            "label": "Your Results",

            "data": [

              10,

              20,

              30,

              40,

              50,

              60,

              70,

              80,

              90,

              100,

              110

            ],

            "fill": true,

            "backgroundColor": "rgba(165, 211, 164, 0.2)",

            "borderColor": "rgb(165, 211, 164)",

            "pointBackgroundColor": "rgb(165, 211, 164)",

            "pointBorderColor": "#fff",

            "pointHoverBackgroundColor": "#fff",

            "pointHoverBorderColor": "rgb(255, 99, 132)"

        }]

    },

    "options": {

        "elements": {

            "line": {

                "tension": 0,

                "borderWidth": 3

            }

        }

    }

});


一只斗牛犬
浏览 189回答 3
3回答

RISEBY

您可以通过将这些道具添加到图表的比例规范中轻松做到这一点:scale: {      gridLines: {        color: 'red'      },      angleLines: {        color: 'red'      }    },视觉输出将是您要求的输出

Helenr

看来库的配置已更改,现在应该如下所示:...scales: {          r: {            grid: {              color: "lightgreen",            },          }}        

白衣非少年

options: {        scales: {            r: {                max: 100,                min: 0,                ticks: {                    stepSize: 20,                    textStrokeColor: 'rgb(54, 162, 235)',                    color: 'rgba(240, 240, 240, 0.5)',                    backdropColor: 'rgb(47, 56, 62)'                },                angleLines: {                    color: 'rgba(240, 240, 240,0.5)',                },                grid: {                    color: "lightgreen",                },            },                            },
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript