sql - 将我的热图连接到将提取并显示特定数据的 sql 数据库
问题描述
我创建了一个热图。我目前可以将鼠标悬停在某个状态上，以查看该状态将颜色变为黄色，让您知道悬停在哪个状态上，并在弹出窗口中查看硬编码到该状态的值。当前状态是不同深浅的蓝色，具体取决于我硬编码的值，并且值越小越亮，值越高越暗。我现在需要做的是使用数据库中的疫苗总数设置状态值，并在弹出窗口中显示该数字，并在左侧相应行旁边显示单独的疫苗数量页。例如，如果我将鼠标悬停在亚利桑那州，弹出窗口将显示亚利桑那州的疫苗总数以及疫苗 1、2、3、4 的数量，和 5 已给出，该数字显示在已显示的相应行旁边。我在热图屏幕截图上用红色 x 标记了这些位置。该数据库是 Microsoft SQL Server Management Studio 中的 SQL 数据库。我还包括了一个数据库的屏幕截图，以显示表和列的名称。数据库中只有 5 种疫苗，并标有 ID 编号 1 - 5。它们在数据库中由 Vaccine_ID 调用。提前感谢您提供的任何帮助。数据库中只有 5 种疫苗，并标有 ID 编号 1 - 5。它们在数据库中由 Vaccine_ID 调用。提前感谢您提供的任何帮助。数据库中只有 5 种疫苗，并标有 ID 编号 1 - 5。它们在数据库中由 Vaccine_ID 调用。提前感谢您提供的任何帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Vaccine Status / Heat Map </title>
</head>
<body>
<br>
<h1> Vaccine Status / Heat Map </h1>
<style>h1{
color:rgb(19, 38, 175);
font-size:30px;
text-align:center;
}
</style>
<h2> Total Vaccine 1 Doses Administered: </h2>
<style>h2{
color:rgb(53, 16, 218);
font-size:12px;
text-align:left;
}
</style>
<br>
<h3> Total Vaccine 2 Doses Administered: </h3>
<style>h3{
color:rgb(53, 16, 218);
font-size:12px;
text-align:left;
}
</style>
<br>
<h3> Total Vaccine 3 Doses Administered: </h3>
<style>h3{
color:rgb(53, 16, 218);
font-size:12px;
text-align:left;
}
</style>
<br>
<h3> Total Vaccine 4 Doses Administered: </h3>
<style>h3{
color:rgb(53, 16, 218);
font-size:12px;
text-align:left;
}
</style>
<br>
<h3> Total Vaccine 5 Doses Administered: </h3>
<style>h3{
color:rgb(53, 16, 218);
font-size:12px;
text-align:left;
}
</style>
<br>
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_usaLow;
// Set projection
chart.projection = new am4maps.projections.AlbersUsa();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
//Set min/max fill color for each area
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
min: chart.colors.getIndex(1).brighten(1),
max: chart.colors.getIndex(1).brighten(-0.3)
});
// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;
// Set heatmap values for each state
polygonSeries.data = [
{
id: "US-AL",
value: 4447100
},
{
id: "US-AK",
value: 626932
},
{
id: "US-AZ",
value: 5130632
},
{
id: "US-AR",
value: 2673400
},
{
id: "US-CA",
value: 33871648
},
{
id: "US-CO",
value: 4301261
},
{
id: "US-CT",
value: 3405565
},
{
id: "US-DE",
value: 783600
},
{
id: "US-FL",
value: 15982378
},
{
id: "US-GA",
value: 8186453
},
{
id: "US-HI",
value: 1211537
},
{
id: "US-ID",
value: 1293953
},
{
id: "US-IL",
value: 12419293
},
{
id: "US-IN",
value: 6080485
},
{
id: "US-IA",
value: 2926324
},
{
id: "US-KS",
value: 2688418
},
{
id: "US-KY",
value: 4041769
},
{
id: "US-LA",
value: 4468976
},
{
id: "US-ME",
value: 1274923
},
{
id: "US-MD",
value: 5296486
},
{
id: "US-MA",
value: 6349097
},
{
id: "US-MI",
value: 9938444
},
{
id: "US-MN",
value: 4919479
},
{
id: "US-MS",
value: 2844658
},
{
id: "US-MO",
value: 5595211
},
{
id: "US-MT",
value: 902195
},
{
id: "US-NE",
value: 1711263
},
{
id: "US-NV",
value: 1998257
},
{
id: "US-NH",
value: 1235786
},
{
id: "US-NJ",
value: 8414350
},
{
id: "US-NM",
value: 1819046
},
{
id: "US-NY",
value: 18976457
},
{
id: "US-NC",
value: 8049313
},
{
id: "US-ND",
value: 642200
},
{
id: "US-OH",
value: 11353140
},
{
id: "US-OK",
value: 3450654
},
{
id: "US-OR",
value: 3421399
},
{
id: "US-PA",
value: 12281054
},
{
id: "US-RI",
value: 1048319
},
{
id: "US-SC",
value: 4012012
},
{
id: "US-SD",
value: 754844
},
{
id: "US-TN",
value: 5689283
},
{
id: "US-TX",
value: 20851820
},
{
id: "US-UT",
value: 2233169
},
{
id: "US-VT",
value: 608827
},
{
id: "US-VA",
value: 7078515
},
{
id: "US-WA",
value: 5894121
},
{
id: "US-WV",
value: 1808344
},
{
id: "US-WI",
value: 5363675
},
{
id: "US-WY",
value: 493782
}
];
// Set up heat legend
let heatLegend = chart.createChild(am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.valign = "bottom";
heatLegend.width = am4core.percent(20);
heatLegend.marginRight = am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 400000000;
// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.text = "Not Vaccinated";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.text = "Vaccinated";
// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(labelText) {
return "";
});
// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeWidth = 0.5;
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#FFFF00");
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
</body>
</html>
解决方案
推荐阅读
- gitlab - 如何在 Gitlab 上查看文件的所有历史版本？
- ibm-cloud - 在 dropsolve 中带有回调的 docplex
- javascript - 使用地图获取属性是否禁用
- if-statement - 我不想写 60 个 'IF' 命令
- python - TypeError：将形状转换为 TensorShape 时出错：int() 参数必须是字符串或数字，而不是“元组”
- html - 使用 VB.Net 将 Excel 转换为 HTML
- e-commerce - 如何创建 Commerce Repeat Order 链接视图？
- mysql - Laravel 多连接计数
- python - 要锁定并用于运行余额计算的数据框单元格（后续问题）
- go - 与任意切片一起使用的交换实现