我有两个数据集数组。
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文件中使用输入颜色绘制我的两个数组。问题是图形栏的颜色为黑色,如下图所示:
js prettyprint-override">// 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
}
}
});
}
请帮忙
如果您想从样式表中给出颜色,您需要遍历文档中的样式表,并获得您想要的类
的颜色,
下面是遍历样式表并获取颜色的代码
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;
}
来源:如何通过javascript/jQuery从CSS类获取样式属性?
但是建议使用JS文件本身中的颜色作为ChartJS留档,
因此,在代码中实现这一点很好。
下面是结合您的代码和上述代码的代码。
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 标题属性和 CSS 链接属性,并将其应用于页面上的所有标题和链接。 可指定页面标题的字体、字体大小和颜色。默认情况下,Dreamweaver 创建标题的 CSS 规则,并将其应用于在页面上使用的所有标题。这些规则嵌入在页面的 head 部分。 若要应用 CSS 标题属性, 执行下列操作之一 单击“文件”>“页面属性” 单击“窗口”>“页面属性”,然后单击文本属性检查器中的“页
我是XSLT的新手,不知道如何将属性从子标记复制到新标记。我很确定这是一个愚蠢的初学者的错误。 输入文件为: 到目前为止,我拥有的XSLT是: 这将生成: 但是,我需要: 如何向h1标签添加新的href属性并复制内容标签的src属性的值? 我试过: 但这产生了一个语法错误。
我在JavaFX应用程序中使用MVP。 资源: 控制器: 看法 在我的InfoStageView中,只需初始化我的标签和样式我的视图。 如何将我的超链接绑定到我的标签。我尝试了一些方法,但没有成功。我的StringProperty不可点击,但很容易绑定。 我的目标:我想打开带有链接的浏览器。
问题内容: 我想复制一个画布上的所有内容,然后在客户端将它们全部转移到另一个画布上。我认为我会使用and 方法来实现这一点,但是我遇到了一些问题。 我的解决方案是将其获取并存储在Javascript中的Image对象中,然后使用该方法将其放回原处。 但是,我相信该方法会返回一个带有64位编码标签的标签。这似乎不是一个有效的标签,(我总是可以使用一些RegEx删除它),但是子字符串之后的64位编码字
在HTML文档中,我有以下标记 我正在使用JSoup,希望提取中包含的URL,该URL由标识。在阅读了下面的文章之后 > JSoup解析标记中的数据 我想出了这段代码 但这些都是印刷品 我尝试过其他的变化,但都没有成功。我要么什么也没打印出来,要么最后出现了空指针异常。 我不确定如何提取
我有一个页面,其中包含几个SVG文件。为了同步这些SVG文件的样式,我想创建一个样式表来保存所有样式信息。 然而,当像下面这样包含SVG时,CSS不会被应用。任何人都有解决方案,或者是不可能链接到 时,所有样式都被应用,并且可以看到一个绿色矩形。但是当打开< code>page.htm时,看到的只是一个黑色的长方形。因此,显然没有应用任何已定义的样式。 page.htm 图片.svg 样式. cs