Question

我是JavaScript新手，我正在使用chart.js来创建一些数据可视化，我需要为不同的值更改整个条形图的颜色，到目前为止我的代码是如下，但是我不能让它发挥作用，这不会给我任何错误，所以我不知道该怎么做。

var dData1 = 90; ///////CARREGAR DADOS  DE FACTURAÇÃO (for developer)
var dData2 = 70; ///////CARREGAR DADOS  DE FACTURAÇÃO (for developer)

    var barChartData = {
            labels: ["MÊS", "ANO"],
            datasets: [{
                fillColor: "#f37c8a",
                strokeColor: "none",
                data: [dData1, dData2]
                }]
        }

    if (dData1 < 75)
        {
            barChartData.datasets[0].fillColor = "#f37c8a";
        }
         else if (dData1 > 76 && dData1 < 85) 
        {
            barChartData.datasets[0].fillColor = "#f3e97c";
        } 
        else if (dData1 > 86)
        {
            barChartData.datasets[0].fillColor = "#9ae27d";
        } else 
        {
            barChartData.datasets[0].fillColor = "#fff";
        };  

    if (dData2 < 75)
        {
            barChartData.datasets[0].fillColor = "#f37c8a";
        }
         else if (dData2 > 76 && dData1 < 85) 
        {
            barChartData.datasets[0].fillColor = "#f3e97c";
        } 
        else if (dData2 > 86)
        {
            barChartData.datasets[0].fillColor = "#9ae27d";
        } else 
        {
            barChartData.datasets[0].fillColor = "#fff";
        };

Answer 1

您需要在生成图表后设置bars 的颜色。您需要设置fillColor，highlightFill和_saved.fillColor（Chart.js用于在工具提示悬停后恢复条形颜色）

所以你需要像
这样的东西
if (dData1 < 75) { barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f37c8a"; } else if (dData1 > 76 && dData1 < 85) { barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f3e97c"; } else if (dData1 > 86) { barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#9ae27d"; } else { barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#fff"; };
第一个块的
，其中barChart是您的图表对象。请注意，上面的代码假定一系列包含2个元素。

小提琴 - https://jsfiddle.net/2a86gqsa/

请注意，您在第二个区块中有dData1 < 85 - 我将其更改为dData2 < 85。看到2个块的大部分代码都很常见，您可能希望将其移动到函数中。

Answer 2

解决了，我正在调用库中的项目错误。

SET @sql = NULL;
SELECT
  GROUP_CONCAT(DISTINCT
    CONCAT(
      'sum(gender = ''', gender,
      ''' and r.name = ''',
      r.name, ''') AS "',
      if(gender='m','Male','Female'), 
      ' ',  r.name, '" '
    )
  ) INTO @sql
FROM
  tbl_user u
JOIN 
  tbl_religion r ON u.religion = r.id;

SET @sql = CONCAT(
  'select timestampdiff(year, dob, now()) age, ', @sql, ' 
  from tbl_user u
  join tbl_religion r on u.religion = r.id
  group by timestampdiff(year, dob, now());');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

创建IF以更改chart.js栏颜色

2 个答案: