ChartJS 雷达图雷达线颜色？

Posted 2023-03-14

【中文标题】ChartJS 雷达图雷达线颜色？

【英文标题】：ChartJS Radar Chart radar lines color?

【发布时间】：2020-07-02 11:30:15

【问题描述】：

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

有没有办法做到这一点？

这是我当前的代码：

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

【参考方案1】：

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

            ,
            
        
        ,

enter image description here

【参考方案2】：

似乎库的配置已更改，现在应该如下所示：

...
scales: 
          r: 
            grid: 
              color: "lightgreen",
            ,
          
        

【讨论】：

谢谢..它的工作

【参考方案3】：

您可以通过将这些道具添加到图表的比例规范中轻松做到这一点：

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

视觉输出将是您要求的输出

希望这会有所帮助！ :)