根据单元格值对 table 个单元格进行颜色缩放

Question

我正在制作一个交互式混淆矩阵，但我希望 table 单元格的颜色使用类似于 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>

Answer 1

获取每个单元格的数据 (number/value) 并为值分配颜色范围：

$("#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...
});

未测试。

Answer 2

以下代码效果最好：

<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>

您可以大量更改 data.Thanks 每个单元格的颜色值 @m1crdy

根据单元格值对 table 个单元格进行颜色缩放

Color scale to the table cells according to cell value

html

javascript

data-visualization

google-visualization

confusion-matrix