ChartJS雷达图更改标签颜色

zbwhf8kr 于 2023-01-02 发布在 Chart.js

关注(0)|答案(2)|浏览(217)

我想用Chart.js来设计一个雷达图，但是我好像搞不懂这个。x1c 0d1x我想首先把所有文本的颜色都改成白色，包括标题，标签名和标签。我还想去掉坐标轴周围的方框，把它们的颜色也改成白色。下面是我用atm编写的代码（我用django来处理数据）

new Chart(ctx, {
    type: 'radar',
    data: {
        labels: {{ subjects|safe }},
        datasets: [{
            label: '2022 Noten',
            data: {{ grades_avg }},
            borderWidth: 1
        }, {
            label: '2021 Noten',
            data: [],
            borderWidth: 0.5
        }]
    },
    options: {
        scale: {
            min: 1,
            max: 6,
            ticks: {
                stepSize: 0.5,
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            r: {
                grid: {
                    color: 'gray'
                },
                angleLines: {
                    color: 'gray'
                },
            }
        },
        plugins: {
            title: {
                display: true,
                text: 'Noten im Vergleich'
            }
        }
    }
});

我只是不明白这个图书馆，我很感激你的帮助。谢谢！

chart.js

来源：https://stackoverflow.com/questions/74974860/chartjs-radar-change-label-color

2条答案

按热度按时间

p1iqtdky1#

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');
Chart.defaults.color = '#fff';
  new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 10,
        borderColor: '#00A2EB',
      backgroundColor: '#FFB1C1',
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

这里有一个最简单的示例-详细文档在这里https://www.chartjs.org/docs/latest/general/colors.html

赞(0）回复(0）举报 2023-01-02

avkwfej42#

好的。下面我给你一个例子，里面有指向文档的有用链接。

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
    datasets: [{
      label: 'Data',
      data: [3.5, 5, 2.5, 3],
      borderWidth: 1
    }]
  },
  options: {
    locale: 'en-US',
    scale: {
      min: 1,
      max: 6,
      ticks: {
        stepSize: 0.5,
      }
    },
    scales: {
      r: { // https://www.chartjs.org/docs/latest/axes/radial/
        angleLines: {
          color: 'gray'
        },
        grid: {
          color: 'gray'
        },
        pointLabels: { // https://www.chartjs.org/docs/latest/axes/radial/#point-labels
          color: 'white'
        },
        ticks: { // https://www.chartjs.org/docs/latest/axes/radial/#ticks
          color: 'white',
          backdropColor: 'transparent' // https://www.chartjs.org/docs/latest/axes/_common_ticks.html
        }
      }
    },
    plugins: {
      title: { // https://www.chartjs.org/docs/latest/configuration/title.html
        display: true,
        text: 'Title',
        color: 'white'
      },
      legend: {
        labels: { // https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
          color: 'white'
        }
      }
    }
  }
});

.chart-container {
  position: relative;
  height: 90vh;
}

canvas {
  background: #282a2d;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

赞(0）回复(0）举报 2023-01-02

我来回答

ChartJS雷达图更改标签颜色

2条答案

相关问题

热门标签

最新问答