Question

我有两个数据集数组。

data: [589, 445, 483, 503, 689, 692, 634],
data: [639, 465, 493, 478, 589, 632, 674],

我想将每个带有颜色数组的数据集绘制到CSS文件中。

在我的css文件中，有：

/* Colors  */
.color0 {
  background-color: red !important;
}
.color1 {
  background-color: lightgray !important;
}

我想使用colors变量在CSS文件中用输入颜色绘制两个数组。问题在于图形栏为黑色，如下图所示：

// Color array to draw bar dataset
var colors = ['color0', 'color1'];
var chBar = document.getElementById("chBar");
var chartData = {
  // Label of Entity
  labels: ["RTI_0;RTI", "RTI_1;RTI", "RTI_2;RTI", "BB_0;BB", "BB_1;BB", "BB_2;BB", "BB_3;BB"],
  // Value of percent category RTI|| VSM ...
  datasets: [{
      data: [589, 445, 483, 503, 689, 692, 634],
      backgroundColor: colors[0]
    },
    {
      data: [639, 465, 493, 478, 589, 632, 674],
      xAxisID: 'xAxis1',
      backgroundColor: colors[1]
    }
  ]
};

if (chBar) {
  // new graph
  new Chart(chBar, {
    type: 'bar',
    data: chartData,
    options: {
      scales: {
        xAxes: [{
            barPercentage: 0.7,
            categoryPercentage: 0.3,
            id: 'xAxis1',
            type: "category",
            ticks: {
              callback: function(label) {
                var sublabel_x = label.split(";")[0];
                var label_p = label.split(";")[1];
                return sublabel_x;
              }
            }
          },{
            id: 'xAxis2',
            type: "category",
            gridLines: {
              drawOnChartArea: false, // only want the grid lines for one axis to show up
            },
            ticks: {
              callback: function(label) {
                var sublabel_x = label.split(";")[0];
                var label_p = label.split(";")[1];
                if (label_p === "RTI") {
                  return label_p;
                } else {
                  return label_p;
                }
              }
            }
          }
        ],
        yAxes: [{
          ticks: {
            beginAtZero: false
          },
          scaleLabel: {
            display: true,
            labelString: '%'
          }
        }]
      },
      legend: {
        display: false
      }
    }
  });
}

输出

请帮助

Answer 1

如果要提供样式表中的颜色，则需要遍历文档中的样式表并获取所需的class的颜色，

下面是遍历样式表并获取颜色的代码

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                return rule.style[style];
            }
        }
    }
    return null;
}

来源：How to get a style attribute from a CSS class by javascript/jQuery?

但是建议根据ChartJS documentation使用JS文件本身中的颜色，

因此，在您的代码中实现此效果很好。

这是结合您的代码和上述代码的代码。

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                return rule.style[style];
            }
        }
    }
    return null;
}

//console.log();



// Color array to draw bar dataset
var colors = [getStyleRuleValue('background-color', '.color0'), getStyleRuleValue('background-color', '.color1')];
var chBar = document.getElementById("chBar");
var chartData = {
  // Label of Entity
  labels: ["RTI_0;RTI", "RTI_1;RTI", "RTI_2;RTI", "BB_0;BB", "BB_1;BB", "BB_2;BB", "BB_3;BB"],
  // Value of percent category RTI|| VSM ...
  datasets: [{
      data: [589, 445, 483, 503, 689, 692, 634],
      backgroundColor: colors[0]
    },
    {
      data: [639, 465, 493, 478, 589, 632, 674],
      xAxisID: 'xAxis1',
      backgroundColor: colors[1]
    }
  ]
};

if (chBar) {
  // new graph
  new Chart(chBar, {
    type: 'bar',
    data: chartData,
    options: {
      scales: {
        xAxes: [{
            barPercentage: 0.7,
            categoryPercentage: 0.3,
            id: 'xAxis1',
            type: "category",
            ticks: {
              callback: function(label) {
                var sublabel_x = label.split(";")[0];
                var label_p = label.split(";")[1];
                return sublabel_x;
              }
            }
          },{
            id: 'xAxis2',
            type: "category",
            gridLines: {
              drawOnChartArea: false, // only want the grid lines for one axis to show up
            },
            ticks: {
              callback: function(label) {
                var sublabel_x = label.split(";")[0];
                var label_p = label.split(";")[1];
                if (label_p === "RTI") {
                  return label_p;
                } else {
                  return label_p;
                }
              }
            }
          }
        ],
        yAxes: [{
          ticks: {
            beginAtZero: false
          },
          scaleLabel: {
            display: true,
            labelString: '%'
          }
        }]
      },
      legend: {
        display: false
      }
    }
  });
}

.color0 {
  background-color: red !important;
}
.color1 {
  background-color: lightgray !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

</head>
<body>
  <canvas id="chBar"></canvas>
</body>
</html>

希望它对您有帮助。

谢谢

如何在CSS属性和jQuery之间链接到canvas标签

1 个答案: