Chartjs-如何使用jquery访问/获取图表的元素？

Question

我有一个带有3个饼图的chartjs饼图。我想访问图表并将样式应用于特定的饼图。

我知道在图表上触发事件时，有一些方法可以访问元素，但是当没有触发事件时，该怎么做？

请帮助，谢谢。

var qualityChart;
var ctx = document.getElementById('qualityChart').getContext('2d');

var chart = new Chart(ctx, {
  type: 'pie',
  // The data for our dataset
  data : {
    datasets : [ {
      data : [10, 20, 30],
      backgroundColor : [ 'rgba(217, 83, 79, 1)',
                         'rgba(0, 168, 176, 1)', 'rgba(255, 205, 86, 1)' ]
    } ],
    labels : ['A', 'B', 'C']
  },
  // Configuration options go here
  options: {
    responsive : true,
    legend : false,
    layout : {
      padding : {
        top : 10,
        bottom : 10
      }
    },
    tooltips : {
      enabled : true,
      mode : 'label'
    }
  }
});

<canvas id="qualityChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

Answer 1

您的Q非常笼统。另外，此问题not特别与jquery有关（对chart.js数据对象的访问由dot notation进行。）>

console.log(chart.data.datasets[0].backgroundColor[0]); /* "rgba(217, 83, 79, 1)" */
console.log(chart.data.labels[0]); /* "A" */
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

基本的“ hello world”示例（更改A的颜色）

A。后加载：

[if计数器> 20]将第一个饼图颜色更改为紫色，并更改update()图表+单击更改颜色。

https://www.chartjs.org/docs/latest/developers/updates.html

var qualityChart;
var ctx = document.getElementById('qualityChart').getContext('2d');

var chart = new Chart(ctx, {
  type: 'pie',
  // The data for our dataset
  data : {
    datasets : [ {
      data : [10, 20, 30],
      backgroundColor : [ 'rgba(217, 83, 79, 1)',
                         'rgba(0, 168, 176, 1)', 'rgba(255, 205, 86, 1)' ]
    } ],
    labels : ['A', 'B', 'C']
  },
  // Configuration options go here
  options: {
    responsive : true,
    legend : false,
    layout : {
      padding : {
        top : 10,
        bottom : 10
      }
    },
    tooltips : {
      enabled : true,
      mode : 'label'
    }
  }
});

/* change after load */
var counter = 25;

if (counter > 20){
  chart.data.datasets[0].backgroundColor[0] = "violet";
  chart.update();
}

function changeColorOfA(elem,color){
  chart.data.datasets[0].backgroundColor[0] = color;
  chart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<button onclick="changeColorOfA(this, 'blue')">Change [A] Color to Blue</button> 
<button onclick="changeColorOfA(this, 'red')">Change [A] Color to Red</button>
<canvas id="qualityChart"></canvas>

B。加载前

：在chart.js创建之前更改数据对象（通过使用/不使用jquery进行任何操作或逻辑）。

/* change data before load */
var counter = 25;
var firstColor = "";
if (counter > 20){
  firstColor = "violet";
}
backgroundColor : [ firstColor, 'rgba(0, 168, 176, 1)', 'rgba(255, 205, 86, 1)'
摘要

var qualityChart;
var ctx = document.getElementById('qualityChart').getContext('2d');

/* change data before load */
var counter = 25;
var firstColor = "red";
if (counter > 20){
  firstColor = "violet";
}

var chart = new Chart(ctx, {
  type: 'pie',
  // The data for our dataset
  data : {
    datasets : [ {
      data : [10, 20, 30],
      backgroundColor : [ firstColor, 'rgba(0, 168, 176, 1)', 'rgba(255, 205, 86, 1)' ]
    } ],
    labels : ['A', 'B', 'C']
  },
  // Configuration options go here
  options: {
    responsive : true,
    legend : false,
    layout : {
      padding : {
        top : 10,
        bottom : 10
      }
    },
    tooltips : {
      enabled : true,
      mode : 'label'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="qualityChart"></canvas>

总和：组合A + B并创建您想要的任何想法-或-逻辑（循环会很快抛出数据）。她的复杂示例（在Scriptable下）：https://www.chartjs.org/samples/latest/

对于特定的答案，请添加特定的Q（What kind of chartJS event? Hover on tooltip? and so on）。

事件点击：

看起来这不是您的问题-而是另一个选项/想法：

How to get click event in Chart.js

Click event on stacked bar chart - ChartJs