Question

我有一个像上面的图。我只想要一个带有绿色边框的类别。例如，只有x轴2235带有绿色边框。或以其他方式仅突出显示2235绿色。

由于我使用的是多条图，因此我不知道如何将borderColor或borderWidth应用于数据集中的单个点。有任何想法吗？谢谢！

Answer 1

希望我的代码段对您有所帮助。

长话短说：我不知道如何仅使用配置来获得类似的结果，但是在初始化后对图表进行操作确实具有魔力。

动态更改图表中的内容时，请不要忘记chart.update()。

干杯！

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <canvas id="myChart" width="400" height="400"></canvas>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script>
    const context = document.getElementById("myChart").getContext('2d');
    const chart = new Chart(context, {
      type: 'bar',
      data: {
        labels: ["First", "Second", "Third"],
        datasets: [{
            label: "Red",
            backgroundColor: "red",
            borderColor: [],
            borderWidth: 4,
            data: [4, 3, 5]
          },
          {
            label: "Green",
            backgroundColor: "green",
            borderColor: [],
            borderWidth: 4,
            data: [7, 2, 6]
          },
          {
            label: "Blue",
            backgroundColor: "blue",
            borderColor: [],
            borderWidth: 4,
            data: [3, 7, 4]
          },

        ]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    const color = "yellow";
    const indexOfBordered = 1;
    chart.data.datasets.forEach(dataset => {
      dataset.borderColor[indexOfBordered] = color;
    });
    chart.update();
  </script>

</body>

</html>

在Chart.js多栏图中，是否可以突出显示单个类别？

1 个答案: