簡體   English   中英

ChartJS 雷達圖雷達線顏色?

[英]ChartJS Radar Chart radar lines color?

所以我對此進行了很多研究,但沒有找到解決方案,我想改變雷達線的顏色,如下所示:

在此處輸入圖像描述

有沒有辦法做到這一點?

這是我當前的代碼:

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
            }
        }
    }
});

您可以通過將這些道具添加到圖表的比例規范中來輕松完成:

scale: {
      gridLines: {
        color: 'red'
      },
      angleLines: {
        color: 'red'
      }
    },

視覺輸出將是您要求的

在此處輸入圖片說明

希望這可以幫助! :)

看起來庫的配置已更改,現在應該如下所示:

...
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",
                },

            },
            
        
        },

在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM