Highchart-单击时显示/隐藏数据标签

时间：2018-08-27 05:12:03

标签： javascript highcharts

使用highmap单击国家/地区选择时显示/隐藏数据标签。使用plotOptions尝试了许多方法和选项，但对我没有任何帮助。请帮忙。

Fiddle

代码：

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

  var countryData = [{
    "key": "in",
    "index": 2
  }, {
    "key": "ru",
    "index": 2
  }];

  // Initiate the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Test map'
    },
    tooltip: {
      enabled: true
    },
    mapNavigation: {
      enabled: true
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function(x) {
              x.preventDefault();
              var opt = x.target.chart.options.plotOptions.series;
              opt.dataLabels.enabled = !opt.dataLabels.enabled;
              x.target.chart.series[x.target.index].update(opt);
              that.handleCountrySelect(this);
            }
          }
        },
      }
    },
    series: [{
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",
      states: {
        hover: {
          color: "#00b700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      },
      dataLabels: {
        enabled: true,
        className: 'highlight',
        useHTML: true,
        formatter: function() {
          return ("<div class='pin bounce'><span class='pin-label'>" + this.point.key.toUpperCase() + "</span></div><div class='pulse'></div>")
        },
      },
      point: {
        events: {
          click(x) {
            var opt = x.target.chart.options.plotOptions.series;
            opt.dataLabels.enabled = !opt.dataLabels.enabled;
            x.target.chart.series[x.target.index].update(opt);
            console.log("Code : ", this.key)
          }
        }
      }
    }]

  });
});
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

/* // data labels */

.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: white;
  stroke-width: 1px;
  stroke: red;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: black;
}

.pin {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  background: #CA091A;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -15px;
}

.pin-label {
  width: 13px;
  height: 12px;
  font-size: 10px;
  font-weight: bold;
  margin: 4px 0 0 3px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
  transform: rotate(45deg);
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}

.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

1 个答案:

答案 0 :(得分：0)

我更新了以下代码段中的点击功能：

 $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

  var countryData = [{
"key": "in",
"index": 2
  }, {
"key": "ru",
"index": 2
  }]; 

  // Initiate the chart
  Highcharts.mapChart('container', {
title: {
  text: 'Test map'
},
tooltip: {
  enabled: true
},
mapNavigation: {
  enabled: true
},
    plotOptions: {
        series:{
            point:{
                events:{
                    click: function(){
                    
                        var e = !this.dataLabels || this.dataLabels.enabled ? false : true;
                        this.update({
                            dataLabels:{
                                enabled: e
                            }
                        });
                    }
                }
            }
        }
    },
series: [{
  mapData: Highcharts.maps["custom/world"],
  data: countryData,
  joinBy: ['hc-key', 'key'],
  name: "Country Info",
  states: {
    hover: {
      color: "#00b700"
    }
  },
  tooltip: {
    headerFormat: '',
    pointFormat: '{point.name}'
  },
  dataLabels: {
    enabled: true,        
    className: 'highlight',                
    useHTML: true,
    formatter: function(){
    	return ("<div class='pin bounce'><span class='pin-label'>"+this.point.key.toUpperCase()+"</span></div><div class='pulse'></div>")
      },
  },
  point: {
    events: {
                    click: function(){
                        var e = !this.dataLabels || this.dataLabels.enabled ? false : true;
                        this.update({
                            dataLabels:{
                                enabled: e
                            }
                        });
                    }
    }
  }
}]

  });
});
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

/* // data labels */

.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: white;
  stroke-width: 1px;
  stroke: red;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: black;
}

.pin {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  background: #CA091A;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -15px;
}

.pin-label {
  width: 13px;
  height: 12px;
  font-size: 10px;
  font-weight: bold;
  margin: 4px 0 0 3px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
  transform: rotate(45deg);
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}

.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

相关问题
最新问题