如何改变巴色如果必须高于平均得分在混合图chart.js之

Shubham辛格:

图表的IMG,我已创建

在这个参考图片,我想改变颜色条的绿色,如果去上面AvgScor即行吧

我使用chart.js之混合图

在从左侧此IMG第四之一是上述平均得分

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

var totalScoreData = [60,30,50,75,45,41]; // Add data values to array
var averageData = [61,45,55,70,46,52] // Add data values to array
var labels = ["A"," Q", "C","C","A","p"]; // Add labels to array

var overAllScore = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Scores', // Name the series
        data: totalScoreData,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',

        borderWidth: 1 
      },
          {
        label: 'AvgScore',
        data: averageData, 
        backgroundColor: '#f443368c',
        borderColor: '#f443368c',

        borderWidth: 1, // Specify bar border width
        type: 'line', 
        fill: false        
      }]
    },
    options: {
    responsive: true, // Instruct chart js to respond nicely.
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
          display: true,
          ticks: {
            beginAtZero: true,
            steps: 10,
            max: 100
          }
        }]
    }

    }

  });
<canvas id="overAllScore" style="display: block; width: 765px; height: 382px;" width="765" height="382" class="chartjs-render-monitor"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

亚历克斯·L:

好吧,让我们把一个最小的重复的例子,第一个(在的问题,确保有代码,有人可以单击“运行的代码片段”在这里或打开一个链接到一个codePen /代码沙箱等等 - 你应该给假数据让别人开始用一个例子马上就跟你必须在你的屏幕截图等):

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

var totalScoreData = [60,30,50,75,45,41]; // Add data values to array
var averageData = [61,45,55,70,46,52] // Add data values to array
var labels = ["A"," Q", "C","C","A","p"]; // Add labels to array

function colorGenerator() {
  return totalScoreData.map((child,index) => {
    if (child >= averageData[index]){
      return 'rgba(5, 250, 10, 0.2)'
    } else {
       return 'rgba(255, 99, 132, 0.2)'
    }
  })
} 

var overAllScore = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Scores', // Name the series
                data: totalScoreData,
                backgroundColor: colorGenerator, //set the colors with a function
                borderWidth: 1 
            },
            {
                label: 'AvgScore',
                data: averageData, 
                backgroundColor: '#f443368c',
                borderColor: '#f443368c',

                borderWidth: 1, // Specify bar border width
                type: 'line', 
                fill: false        
            }]
        },
        options: {
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true,
                        steps: 10,
                        max: 100
                    }
                }]
        }

        }

    });
    
    ///from chart.js docs:
    /*
    var chartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				type: 'line',
				label: 'Dataset 1',
				borderColor: window.chartColors.blue,
				borderWidth: 2,
				fill: false,
				data: [
					1,2,3,4,5,6,7
				]
			}, {
				type: 'bar',
				label: 'Dataset 2',
				backgroundColor: window.chartColors.red,
				data: [
					2,3,4,5,6,7,8
				],
				borderColor: 'white',
				borderWidth: 2
			}]

		};
		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myMixedChart = new Chart(ctx, {
				type: 'bar',
				data: chartData,
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Chart.js Combo Bar Line Chart'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					}
				}
			});
		};
    */
<canvas id="overAllScore" style="display: block; width: 765px; height: 382px;" width="765" height="382" class="chartjs-render-monitor"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

接下来,我们可以想出一个办法来改变根据其值和平均值栏的颜色。

结果是这样的:

在这里输入图像描述

而要实现这一点,我们做以下需要:

首先,设置了两个数据数组:

var totalScoreData = [60,30,50,75,45,41];
var averageData = [61,45,55,70,46,52]

然后修改新表的构造函数:

var overAllScore = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Scores', // Name the series
                data: totalScoreData,
                backgroundColor: colorGenerator, //set the colors with a function
                borderWidth: 1 
            },
            {
                label: 'AvgScore',
                data: averageData, 
                backgroundColor: '#f443368c',
                borderColor: '#f443368c',

                borderWidth: 1, // Specify bar border width
                type: 'line', 
                fill: false        
            }]
        }, ...

关键线路这里需要注意的是backgroundColor: colorGenerator,在得分数据集。这意味着分配基于函数的颜色。

这个功能看起来是这样的:

function colorGenerator() {
  return totalScoreData.map((child,index) => {
    if (child >= averageData[index]){
      return 'rgba(5, 250, 10, 0.2)' //green
    } else {
       return 'rgba(255, 99, 132, 0.2)' //red
    }
  })
} 

它的作用是把totalScoreData数组和映射了它,无论它是高于相应的平均数据相同指数- averageData[index]然后返回一个绿色,否则返回红色。

而已 :)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用chart.js之的onClick功能,你可以从未定义或空的结果执行代码?

无法创建使用chart.js之独立图表

chart.js之 - 添加梯度条形图

如何配置串行端口并与之通信?

如果我没有与之关联的域名,该如何命名软件包?

如何在Material-UI中将组件居中并使之响应?

如何在R降价中转义“ $”并使之滑动?

黑暗之魂如何加载dsfix

饼图不渲染阵营chart.js之

芯片数据手册未说明如何与之通信

如何通过“显示全部/无”按钮使之工作?

如何使用最小,最大和平均值创建Chart.JS条形图

播放歌曲时如何实现与之对应的搜索?

如何根据与之关联的ngModel检查单选按钮

VBA如何改进此代码并使之更高效?

如何使分段控件知道与之关联的联系人用户?

如何删除图像的白色背景并使之透明?

如何修复下面的LinQ笛卡尔程序并使之运行?

如何在Bookshelfjs查询构建器中结合或与之结合?

如何设置答案将与之相关的问题?

在混合图表中Chart.js不同的甜甜圈厚度

如何在R Rcpp中包含sourceCpp并与之链接

如何检查文件的扩展名是否与之相同?

命令末尾的“&”如何使脚本如此之快?

如何拍摄具有白色背景的图像并使之透明

如何更改NSScrollView默认文本并使之不可编辑

如果不是json但与之相似,如何使用boost进行解析?

如何使用opencv从图像中删除黑色背景并使之透明?

如何自定义(或向之添加路径)ember.js Ember Data RESTful URI?

TOP 榜单

热门标签

归档