根据单元格值
我正在创建一个交互式混淆矩阵，但我希望表格单元格的颜色根据单元格值使用类似于https://plot.ly/38/~GuillemDuran/#的颜色标度进行更改。
目前我的代码是：
<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>
，输出
感谢。
我按照建议使用了代码，但它仍然不起作用：
<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 个答案:
答案 0 :(得分：1)
获取每个单元格的数据（数量/值），并将颜色范围设置为值：
$("#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...
});
未经测试。
答案 1 :(得分：0)
以下代码效果最佳：
<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>
您可以更改数据的每个单元格的颜色值。非常感谢@ m1crdy
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？