当前位置: 首页 > 知识库问答 >
问题:

如何将css属性和jQuery链接到画布标签[复制]

景帅
2023-03-14

我有两个数据集数组。

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
      }
    }
  });
}

请帮忙

共有1个答案

池麒
2023-03-14

如果您想从样式表中给出颜色,您需要遍历文档中的样式表,并获得您想要的的颜色,

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

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