javascript - 无法在交互式 Highcharts 分区统计图中显示颜色

Question

我正在尝试使用 highcharts 库中的 HTML 选择框 和 highmaps 在选择时突出显示 map 的不同部分。但是颜色没有显示出来，请检查我的代码jsfiddle ，谢谢。

代码↓↓↓

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tw/tw-all.js"></script>

<div align="center" style="font-size:110%">
  Product:
  <select name='location' onchange="updateChart(this.value)" style="font-size:110%">
    <option value="" selected value="">Select</option>
    <option value="orange">Orange</option>
    <option value="cabbage">Cabbage</option>
    <option value="peanut">Peanut</option>
  </select>
</div>
<br>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

javascript

var data_orange = [
  ['tw-pt', 1],
  ['tw-ml', 1],
  ['tw-il', 1]
];
var data_cabbage = [
  ['tw-hl', 1],
  ['tw-nt', 1]
];
var data_peanut = [
  ['tw-tw', 1],
  ['tw-tp', 1]
];
var data_series = [
{name: 'orange',
data: data_orange},
{name: 'cabbage',
data: data_cabbage},
{name: 'peanut',
data: data_peanut},
];

// Instanciate the map
Highcharts.mapChart('container', {
  chart: {
    borderWidth: 1
  },

  title: {
    text: 'December product map'
  },
  subtitle: {
    text: 'Data Source: AFA Taiwan'
  },

  legend: {
    enabled: false
  },
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  series: [{
    name: 'Country',
    mapData: Highcharts.maps['countries/tw/tw-all'],
    data: [
      data_series
    ],
    color: '#ff0066',
    dataLabels: {
      enabled: true,
      color: '#FFFFFF',
      formatter: function() {
        if (this.point.value) {
          return this.point.name;
        }
      }
    },
    tooltip: {
      headerFormat: '',
      pointFormat: '{point.name}'
    }
  }],
});

window.updateChart = function(selection) {
  if (selection == "") {
    Highcharts.mapChart.series = [data_series];
  } else if (selection == "orange") {
    //console.log(data_series[0].data)
    Highcharts.mapChart.series.data = data_series[0].data;
  } else if (selection == "cabbage") {
    Highcharts.mapChart.series.data = data_series[1].data;
  } else if (selection == "peanut") {
    Highcharts.mapChart.series.data = data_series[2].data;
  }
  console.log(Highcharts.mapChart.series.data)
  //Highcharts.chart('container', chartOptions);
}

//start rendering----------------------------------------------
updateChart("");

Answer 1

您可以将代码更新为

var data_orange = [
  ['tw-pt', 1],
  ['tw-ml', 1],
  ['tw-il', 1]
];
var data_cabbage = [
  ['tw-hl', 1],
  ['tw-nt', 1]
];
var data_peanut = [
  ['tw-tw', 1],
  ['tw-tp', 1]
];

var all_data = [
  ['tw-pt', 1],
  ['tw-ml', 1],
  ['tw-il', 1],
  ['tw-hl', 1],
  ['tw-nt', 1],
  ['tw-tw', 1],
  ['tw-tp', 1],
]
var data_series = [{
  name: 'orange',
  data: data_orange
}, {
  name: 'cabbage',
  data: data_cabbage
}, {
  name: 'peanut',
  data: data_peanut
}, {
  name: 'All',
  data: all_data,
}];
var chart;

function createChart(chartData) {
  // Instanciate the map
  chart = new Highcharts.mapChart('container', {
    chart: {
      borderWidth: 1
    },

    title: {
      text: 'December product map'
    },
    subtitle: {
      text: 'https://stackoverflow.com/questions/47646879/cant-show-the-color-in-interactive-highchart-choropleth-map'
    },

    legend: {
      enabled: false
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    series: [{
      name: 'Country',
      mapData: Highcharts.maps['countries/tw/tw-all'],
      data: chartData,
      dataLabels: {
        enabled: true,
        color: '#FFFFFF',
        formatter: function() {
          if (this.point.value) {
            return this.point.name;
          }
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      }
    }]
  });

}

window.updateChart = function(selection) {
  if (selection == "") {
    createChart(data_series[3].data);
  } else if (selection == "orange") {
    createChart(data_series[0].data)

  } else if (selection == "cabbage") {
    createChart(data_series[1].data)
  } else if (selection == "peanut") {
    createChart(data_series[2].data)
  }

}

//start rendering----------------------------------------------
updateChart("");

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tw/tw-all.js"></script>

<div align="center" style="font-size:110%">
  Product:
  <select name='location' onchange="updateChart(this.value)" style="font-size:110%">
    <option value="" selected value="">Select</option>
    <option value="orange">Orange</option>
    <option value="cabbage">Cabbage</option>
    <option value="peanut">Peanut</option>
  </select>
</div>
<br>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>