1

我正在尝试将条形图添加到 Datamaps，但我不知道如何将其插入到popupTemplate函数中。这是我在和中尝试过index.html的style.css。目前，当我按下ABC按钮并将鼠标悬停在 上时Alaska，这就是我所看到的。

当前数据图输出：

当前数据图输出

基本上，当我将鼠标悬停在代码中的案例Started和Errors来源GHI以及JKLJSON 的阿拉斯加上时，我想看到以下内容。

如果还有其他更好的方法，请随时提出建议。

所需的数据图输出：

所需的数据图输出

<!DOCTYPE HTML>
<html>
<head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
      <script src='datamaps.all.min.js'></script>
      <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> -->
      <!-- Reference style.css -->
    <link rel = "stylesheet" type="text/css" href="style.css">
</head>

<body>
<button id="ABC" onclick='updateCost(ABC)'>ABC</button>
<button id="DEF" onclick='updateCost(DEF)'>DEF</button>
<div id="container" style="position: relative; width: 1300px; height: 700px;">
</div>

<!-- <script type="text/javascript" src="barchart.js"></script> -->

<script>
var dataArray = [23, 13, 21, 14];
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");


var election = new Datamap({

  scope: 'usa',

  element: document.getElementById('container'),

  geographyConfig: {
    highlightBorderColor: '#bada55',
   popupTemplate: function(geography, data) {
     //display bar graph
    //  let bar = displayBarGraph()
     return '<div class="hoverinfo">' + geography.properties.name + ': Cases:' +  data.Cases + ' '
      // '<table class="table-example" style="width:300px"><tr><td><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td><div style="background-color:blue; width: 50 ";/><p> HorX</p></td></tr><tr><td><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td><div style="background-color:red; width: 25 ";/><p> Hor2X</p></td></tr></table>'+'</div>'
     
      
    },
    highlightBorderWidth: 3
  },

  fills: {
  'light': '#ffad99',
            'medium': '#0080FF',
            'heavy': '#ff3300',
            defaultFill: '#ffebe6'
  },

  data:{}

  }); //end new Datamap

  /* function displayBarGraph()
  {
  
    return  '<table id="tblgraph" style="background-color:#C0C0C0;" align="center" width="540" cellpadding="1" cellspacing="0" border="1"><tbody><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:475;"><p style="position:relative; left:476"><font face="arial" size="-2">&nbsp;476</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Feb 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:26;"><p style="position:relative; left:27"><font face="arial" size="-2">&nbsp;27</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Mar 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:171;"><p style="position:relative; left:172"><font face="arial" size="-2">&nbsp;172</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Apr 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:338;"><p style="position:relative; left:339"><font face="arial" size="-2">&nbsp;339</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">May 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:410;"><p style="position:relative; left:411"><font face="arial" size="-2">&nbsp;411</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jun 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:263;"><p style="position:relative; left:264"><font face="arial" size="-2">&nbsp;264</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jul 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:320;"><p style="position:relative; left:321"><font face="arial" size="-2">&nbsp;321</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Aug 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:83;"><p style="position:relative; left:84"><font face="arial" size="-2">&nbsp;84</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Sep 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:136;"><p style="position:relative; left:137"><font face="arial" size="-2">&nbsp;137</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Oct 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:466;"><p style="position:relative; left:467"><font face="arial" size="-2">&nbsp;467</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Nov 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:175;"><p style="position:relative; left:176"><font face="arial" size="-2">&nbsp;176</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Dec 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:10;"><p style="position:relative; left:11"><font face="arial" size="-2">&nbsp;11</font></p></div></td></tr><tr bgcolor="#C0C0C0"><td align="right"><div><font face="arial" size="-2">&nbsp;</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">100</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">200</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">300</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">400</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">500</font></div></td></tr></tbody></table>'
   */  // var chartHeight = 150, chartWidth = 200,
    //         // x = d3.time.scale().domain(d3.extent(locationSpendData, function(d) { return d.month; }))
    //         //                    .range([0, chartWidth]),
    //         // y = d3.scale.linear().domain([0, d3.max(locationSpendData, function(d) { return d.TotalSpend; })])
    //         //                      .range([chartHeight, 0]);

    //     chart = d3.select("svg#spendChart").attr("height", chartHeight)
    //                                        .attr("width", chartWidth);

    //     chart.selectAll("rect.bar")
    //          .data(dataArray)
    //        .enter().append("rect")
    //          .attr("class", "bar")
    //          .attr("x", "10")
    //          .attr("y", "5")
    //          .attr("width", "50")
    //          .attr("height", "50");

        // Select, append to SVG, and add attributes to rectangles for bar chart
//        svg.selectAll("rect")
//           .data(dataArray)
//           .enter().append("rect")
//           .attr("class", "bar")
//           .attr("height", function(d, i) {return (d * 10)})
//           .attr("width","40")
//           .attr("x", function(d, i) {return (i * 60) + 1400})
//           .attr("y", function(d, i) {return 400 - (d * 10)});

// // Select, append to SVG, and add attributes to text
//       svg.selectAll("text")
//           .data(dataArray)
//           .enter().append("text")
//           .text(function(d) {return d})
//            .attr("class", "text")
//            .attr("x", function(d, i) {return (i * 60) + 1400})
//            .attr("y", function(d, i) {return 415 - (d * 10)});

  
    


      // var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      // var yValues = [55, 49, 44, 24, 15];
      // var barColors = ["red", "green","blue","orange","brown"];

      // new Chart("myChart", {
      //   type: "bar",
      //   data: {
      //     labels: xValues,
      //     datasets: [{
      //       backgroundColor: barColors,
      //       data: yValues
      //     }]
      //   },
      //   options: {
      //     legend: {display: false},
      //     title: {
      //       display: true,
      //       text: "World Wine Production 2018"
      //     }
      //   }
      // });
/* } */


  election.labels();


   var ABC = {
        'AK':{'fillKey':'medium','Cases':'634'},
        'AZ':{'fillKey':'medium','Cases':'3'},
        'DC':{'fillKey':'medium','Cases':'32'},
        'FL':{'fillKey':'medium','Cases':'4'},
        'HI':{'fillKey':'medium','Cases':'56'},
        'IN':{'fillKey':'medium','Cases':'65'},
        'IA':{'fillKey':'medium','Cases':'34'},
        'LA':{'fillKey':'medium','Cases':'23'},
        'ME':{'fillKey':'medium','Cases':'23'},
        'MS':{'fillKey':'medium','Cases':'45'},
        'MT':{'fillKey':'medium','Cases':'26'},
        'NV':{'fillKey':'medium','Cases':'51'},
        'NY':{'fillKey':'medium','Cases':'99'},
        'OR':{'fillKey':'medium','Cases':'121'},
        'SD':{'fillKey':'medium','Cases':'122'},
        'TX':{'fillKey':'medium','Cases':'121'},
        'WA':{'fillKey':'medium','Cases':'99'}
    };

    var DEF = {
        'AK':{'fillKey':'heavy','Cases':'168'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };

   var GHI = {
        'AK':{'fillKey':'heavy','Cases':'22'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };

       var JKL = {
        'AK':{'fillKey':'heavy','Cases':'33'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };




  function updateCost(arg) {
    election.updateChoropleth(null, {reset: true});
    election.updateChoropleth(arg);
  }


</script>

</body>
</html>

样式.css

html, body {
    margin: 0;
    height: 100%
  }
  
  /*Rectangle bar class styling*/
  
  .bar {
    fill: #0080FF
  }
  
  .bar:hover {
    fill: #003366
  }
  
  /*Text class styling*/
  
  .text {
    fill: white;
    font-family: sans-serif
  }

提琴手

4

0 回答 0