根据单元格值对表单元格进行颜色缩放
[英]Color scale to the table cells according to cell value
原文
2015-06-24 09:02:03
4
2
javascript/
html/
google-visualization/
data-visualization/
confusion-matrix
问题描述
I am making an interactive confusion matrix but I want the color of the table cells to change as per the cell values using a color scale similar to https://plot.ly/38/~GuillemDuran/# . 
我正在制作交互式混淆矩阵，但我希望使用类似于https://plot.ly/38/~GuillemDuran/#的色标，根据单元格值更改表格单元格的颜色。
Currently my code is: 目前，我的代码是：
<html>
<title>Interactive ROC</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['FPR', 'TPR'],
[ 0.934911, 0.986590],
[ 0.852071, 0.978927],
[ 0.715976, 0.946360],
[ 0.594675, 0.925287],
[ 0.402367, 0.812261],
[ 0.186391, 0.695402],
[ 0.124260, 0.565134],
[ 0.056213, 0.390805],
[ 0.029586, 0.247126],
[ 0.011834, 0.074713]
]);
var csvData = [
['TT', 'TF', 'FT', 'FF', 'Percent_Accuracy'],
[ 93, 49, 11, 98, 30],
[ 85, 97, 89, 27, 40],
[ 71, 59, 76, 94, 50],
[ 59, 46, 75, 92, 22],
[ 40, 23, 67, 81, 89],
[ 18, 63, 91, 40, 34],
[ 12, 42, 60, 54, 23],
[ 56, 21, 34, 52, 44],
[ 29, 58, 62, 26, 22],
[ 11, 83, 47, 13, 76]
];
var options = {
title: 'ROC Curve',
hAxis: {title: 'False Positive Rate', minValue: 0, maxValue: 1},
vAxis: {title: 'True Positive Rate', minValue: 0, maxValue: 1},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
function hello() {
console.log("hello");
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
var trow = selectedItem.row + 1;
var content = '<table class="table table-bordered">';
content += "<thead>";
content += "<tr>" ;
content += "<th colspan='4'>" + "Confusion Matrix" + "</th>";
content += "</tr>" ;
content += "<tr>" ;
content += "<th>" + "Actual vs Predicted" + "</th>";
content += "<th>" + "True" + "</th>";
content += "<th>" + "False" + "</th>";
content += "<th rowspan = '4'>" + "% Accuracy" + "</th>";
content += "</tr>";
content += "</thead>";
content += "<tr>";
content += "<td>" + '<span style="font-weight:bold">True</span>' + "</td>";
for (var j=0; j<3; j++) {
content += "<td>" + csvData[trow][j] + "</td>";
}
content += "</tr>";
content += "<td>" + '<span style="font-weight:bold">False</span>' + "</td>";
for (var j=3; j<5; j++) {
content += "<td>" + csvData[trow][j] + "</td>";
}
content += "</tr>";
content += "</table>";
document.getElementById("table1").innerHTML = content;
}
}
google.visualization.events.addListener(chart, 'select', hello);
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px; "></div>
<div id="table1" style="width: 400px; height: 500px; padding-left: 170px; ">
</div>
and the output is 输出是
Thanks. 谢谢。
I used the code as suggested but it still doesn't work: 我按照建议使用了代码，但仍然无法正常工作：
<html>
<head>
<title>Interactive ROC</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function newDrawChart(a,b){
var data1 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['True Positive', a[0]],
['True Negative', a[1]],
['False Negative', b[3]],
['False Positive', b[4]]
]);
var options = {
title: '',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data1, options);
var data2 = google.visualization.arrayToDataTable([
['Task', ''],
['Correct Classification', 13],
['Misclassification', 11]
]);
var options = {
title: 'Percentage Accuracy'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data2, options);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['FPR', 'TPR'],
[ 0.934911, 0.986590],
[ 0.852071, 0.978927],
[ 0.715976, 0.946360],
[ 0.594675, 0.925287],
[ 0.402367, 0.812261],
[ 0.186391, 0.695402],
[ 0.124260, 0.565134],
[ 0.056213, 0.390805],
[ 0.029586, 0.247126],
[ 0.011834, 0.074713]
]);
var csvData = [
['TT', 'TF', 'FT', 'FF', 'Percent_Accuracy'],
[ 93, 49, 11, 98, 30],
[ 85, 97, 89, 27, 40],
[ 71, 59, 76, 94, 50],
[ 59, 46, 75, 92, 22],
[ 40, 23, 67, 81, 89],
[ 18, 63, 91, 40, 34],
[ 12, 42, 60, 54, 23],
[ 56, 21, 34, 52, 44],
[ 29, 58, 62, 26, 22],
[ 11, 83, 47, 13, 76]
];
var options = {
title: 'ROC Curve',
hAxis: {title: 'False Positive Rate', minValue: 0, maxValue: 1},
vAxis: {title: 'True Positive Rate', minValue: 0, maxValue: 1},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
function hello() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
var trow = selectedItem.row + 1;
var content = '<table class="table table-bordered">';
content += "<thead>";
content += "<tr>" ;
content += "<th colspan='4'>" + "Confusion Matrix" + "</th>";
content += "</tr>" ;
content += "<tr>" ;
content += "<th>" + "Actual vs Predicted" + "</th>";
content += "<th>" + "True" + "</th>";
content += "<th>" + "False" + "</th>";
content += "<th rowspan = '4'>" + "% Accuracy" + "</th>";
content += "</tr>";
content += "</thead>";
content += "<tr>";
content += "<td>" + '<span style="font-weight:bold">True</span>' + "</td>";
var a = [];
var b = [];
for (var j=0; j<3; j++) {
content += "<td class='col-xs-5'>" + csvData[trow][j] + "</td>";
a[j] = csvData[trow][j];
var number = this.csvData[trow][j];
if (number > 0)
{
this.css("background-color:", "blue");
}
}
content += "</tr>";
content += "<td>" + '<span style="font-weight:bold">False</span>' + "</td>";
for (var j=3; j<5; j++) {
content += "<td>" + csvData[trow][j] + "</td>";
b[j] = csvData[trow][j];
}
content += "</tr>";
content += "</table>";
document.getElementById("table1").innerHTML = content;
newDrawChart(a,b);
}
}
google.visualization.events.addListener(chart, 'select', hello);
chart.draw(data, options);
}
</script>
</head>
<body>
<div style="padding-top: 30px;">
<table class="columns">
<tr>
<td style = "height: auto">
<div id="chart_div" style="padding-left: 15px; height: 200px;"></div>
</td><td style = "height: auto">
<div id="table1" style="padding-left: 15px; height: 200px;">
</div>
</td >
<td style = "height: auto">
<div id="donutchart" style="padding-left: 15px; height: 200px;"></div>
</td>
</tr>
<tr>
<td>
<div id = "piechart" style="padding-left: 15px; padding-top: 30px; height: 200px;" >
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2015-06-24 09:27:52
Get the data (number/value) of every cell and asign a color range to the values: 获取每个单元格的数据（数字/值），并为这些值分配一个颜色范围：
$("#chart_div td").each(function(e){
var number = this.html(); // where the html in the td is a the value
if(number <= 0 && number >= 10){ // if number between 0 and 10 give the td a blue background
this.css("background-color:", "blue");
}else if(number > 10 && number <= 20){ // if number between 11 and 20 give the td a red background
this.css("background-color:", "red");
}
// and so on...
});
Not tested. 未经测试。
解决方案2
0 2015-06-25 11:07:55
The following code works the best: 以下代码效果最好：
<html>
<head>
<title>Interactive ROC</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function newDrawChart(a,b){
var data1 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['True Positive', a[0]],
['True Negative', a[1]],
['False Negative', b[3]],
['False Positive', b[4]]
]);
var options = {
title: '',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data1, options);
var data2 = google.visualization.arrayToDataTable([
['Task', ''],
['Correct Classification', 13],
['Misclassification', 11]
]);
var options = {
title: 'Percentage Accuracy'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data2, options);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['FPR', 'TPR'],
[ 0.934911, 0.986590],
[ 0.852071, 0.978927],
[ 0.715976, 0.946360],
[ 0.594675, 0.925287],
[ 0.402367, 0.812261],
[ 0.186391, 0.695402],
[ 0.124260, 0.565134],
[ 0.056213, 0.390805],
[ 0.029586, 0.247126],
[ 0.011834, 0.074713]
]);
var csvData = [
['TT', 'TF', 'FT', 'FF', 'Percent_Accuracy'],
[ 93, 49, 11, 98, 30],
[ 85, 97, 89, 27, 40],
[ 71, 59, 76, 94, 50],
[ 59, 46, 75, 92, 22],
[ 40, 23, 67, 81, 89],
[ 18, 63, 91, 40, 34],
[ 12, 42, 60, 54, 23],
[ 56, 21, 34, 52, 44],
[ 29, 58, 62, 26, 22],
[ 11, 83, 47, 13, 76]
];
var options = {
title: 'ROC Curve',
hAxis: {title: 'False Positive Rate', minValue: 0, maxValue: 1},
vAxis: {title: 'True Positive Rate', minValue: 0, maxValue: 1},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
function hello() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
var trow = selectedItem.row + 1;
var content = '<table class="table table-bordered">';
content += "<thead>";
content += "<tr>" ;
content += "<th colspan='4'>" + "Confusion Matrix" + "</th>";
content += "</tr>" ;
content += "<tr>" ;
content += "<th>" + "Actual vs Predicted" + "</th>";
content += "<th>" + "True" + "</th>";
content += "<th>" + "False" + "</th>";
content += "<th rowspan = '4'>" + "% Accuracy" + "</th>";
content += "</tr>";
content += "</thead>";
content += "<tr>";
content += "<td>" + '<span style="font-weight:bold">True</span>' + "</td>";
var a = [];
var b = [];
for (var j=0; j<3; j++) {
content += "<td class='col-xs-5'>" + csvData[trow][j] + "</td>";
a[j] = csvData[trow][j];
}
content += "</tr>";
content += "<td>" + '<span style="font-weight:bold">False</span>' + "</td>";
for (var j=3; j<5; j++) {
b[j] = csvData[trow][j];
if (csvData[trow][j] > 0)
{
content += "<td bgcolor='#00FF00'>" + csvData[trow][j] + "</td>";
}
}
content += "</tr>";
content += "</table>";
document.getElementById("table1").innerHTML = content;
newDrawChart(a,b);
}
}
google.visualization.events.addListener(chart, 'select', hello);
chart.draw(data, options);
}
</script>
</head>
<body>
<div style="padding-top: 30px;">
<table class="columns">
<tr>
<td style = "height: auto">
<div id="chart_div" style="padding-left: 15px; height: 200px;"></div>
</td><td style = "height: auto">
<div id="table1" style="padding-left: 15px; height: 200px;">
</div>
</td >
<td style = "height: auto">
<div id="donutchart" style="padding-left: 15px; height: 200px;"></div>
</td>
</tr>
<tr>
<td>
<div id = "piechart" style="padding-left: 15px; padding-top: 30px; height: 200px;" >
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
You can change the color values for each cell of the data.Thanks a lot @m1crdy 您可以更改数据每个单元格的颜色值。非常感谢@ m1crdy
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
更改ASP.NET表单元格中文本的颜色（根据值） - Change color of text in ASP.NET table cell (according to value)
如何根据HTML表格单元格的值为其着色 - How to color HTML table cells according to their values
根据标题更改表格单元格的背景颜色 - Change background color of table cells according to their header
Javascript/JQuery - 在具有特定值的单元格前后更改 HTML 表格单元格的背景颜色 - Javascript/JQuery - Change background color of HTML table cells before and after cell with a specific value
React：表格列单元格，带色标的条件格式 - React: Table column cells, conditional formatting with color scale
根据条件着色单元格 - Color cell according to condition
使用 javascript 根据用户输入更改表格单元格背景颜色 - change table cell background color according to user input using javascript
单击单元格之一时重置表格单元格颜色 - Reset table cell color when one of the cells is clicked
引导表，悬停单元格以更改所有单元格的背景色 - Bootstrap table,hover cell to change ALL cells background color
如何根据谷歌表格中其他单元格的值更改单元格的颜色 - How to change the color of a cell based on the value of other cells in google sheets
相关标签