Question

我使用Google开发人员的散点图绘制了ROC曲线。代码为 enter image description here

，输出

enter image description here

我想通过在用户点击散点图中的点时显示混淆矩阵来使其成为交互式（所有点都有相应的混淆矩阵）。

我发现了这个：https://developers.google.com/chart/interactive/docs/gallery/controls#overview

但是这里的饼图根据变量的不同而变化，但是我希望用户点击数据点后立即更新表格内容。

表的样本可以是：

enter image description here

我想知道如何将散点图的数据点与表的表数据联系起来。

非常感谢。

Answer 1

我会使用自定义工具提示并在DataTable的列中渲染您的混淆矩阵。

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

这里有一个interactive demo，有你喜欢的东西。请注意，在将数组转换为数据表后，我将role和html属性添加到工具提示列。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <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', 'Tooltip'],
        [0.934911, 0.98659,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.852071, 0.978927, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.715976, 0.94636,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.594675, 0.925287, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.402367, 0.812261, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.186391, 0.695402, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.12426, 0.564134,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.056123, 0.390805, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.029586, 0.247126, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.011834, 0.074713, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>']
      ]);

      data.setColumnProperty(2, 'role', 'tooltip');
      data.setColumnProperty(2, 'html', true);
      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',
        tooltip: {
          isHtml: true
        }
      };
      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="chart_div" style="width:900px;height:500px;"></div>
</body>

</html>

用于数据可视化的交互式混淆矩阵

1 个答案: