1. дома
  2. Вопрос и ответ
  3. Цветовая шкала для ячеек таблицы в соответствии со значением ячейки

Цветовая шкала для ячеек таблицы в соответствии со значением ячейки

2015-06-24 4 views
0

Я создаю интерактивную матрицу путаницы, но я хочу, чтобы цвет ячеек таблицы изменялся в соответствии с значениями ячейки с использованием цветовой шкалы, аналогичной 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>

и выход

Interactive Confusion matrix

Спасибо.

я использовал код, как это предлагается, но он по-прежнему не работает:

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

источник

2015-06-24 Ninja

ответ

1

Получить данные (номер/значение) каждой ячейки и Asign цветовой диапазон для значений:

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

Не проверено.

источник

2015-06-24 09:27:52 m1crdy

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>

Вы можете изменить цветовые значения для каждой ячейки из data.Thanks много @ m1crdy

источник

2015-06-25 11:07:55 Ninja

 Смежные вопросы

  • Нет связанных вопросов^_^