问更改雷达图中的网格颜色
EN

Stack Overflow用户

提问于 2021-04-10 03:47:32

回答 1查看 185关注 0票数 0

        //radar-chart
        const data = {
              labels: [
                'Stick Slip',
                'Whirl',
                'Bit Balling',
                'Bit Bounce',
                'test'
              ],
              datasets: [{
                label: 'My First Dataset',
                data: [0.2, 0.5, 0, 0, 1],
                fill: true,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(255, 99, 132)'
              },]
            };
            const config = {
                maintainAspectRatio: false,
                elements: {
                    line: {
                        borderWidth: 3,
                    }
                },
                scales: {
                    r: {
                        suggestedMin: 0,
                        suggestedMax: 1,
                        angleLines: {
                        color: 'red'
                        }
                    },
                },
            }
            var ctx = document.getElementById('radar-chart-dysfunctions');
            var myRadarChart = new Chart(ctx, {
                type: 'radar',
                data: data,
                options: config,
            });

如何将灰色网格线更改为另一种颜色？这是我的代码：https://codepen.io/bahrikutlu/pen/QWdaEMp

我在Stack Overflow上找到了各种解决方案，如下所示，但它不能与版本3.0的With Chartjs Radar - how to modify the gray gridlines?一起工作，谢谢

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-10 04:32:58

您必须在比例选项中编辑格网的颜色，如下例所示

var options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      r: {
        grid: {
          color: 'red'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67027411

复制

相似问题

问更改雷达图中的网格颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改雷达图中的网格颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改雷达图中的网格颜色
EN