Javascript Can'；t在交互式highchart choropleth地图中显示颜色

我正在尝试使用

HTML选择框

和

highcharts

库中的

highmaps

在选择时突出显示地图的不同部分。但是颜色没有显示，请检查我的代码，谢谢

代码↓↓↓ HTML

---

您可以根据需要更新代码

var数据\u橙色=[
[tw-pt'，1]，
[tw-ml'，1]，
[tw-il'，1]
];
变量数据=[
[tw-hl'，1]，
[tw-nt'，1]
];
var数据_=[
[tw-tw'，1]，
[tw-tp'，1]
];
var all_数据=[
[tw-pt'，1]，
[tw-ml'，1]，
[tw-il'，1]，
[tw-hl'，1]，
[tw-nt'，1]，
[tw-tw'，1]，
[tw-tp'，1]，
]
var数据_系列=[{
名称：“橙色”，
数据：橙色数据
}, {
名字：'卷心菜'，
数据：数据
}, {
名字：“花生”，
数据：data\u花生
}, {
名称：'全部'，
数据：所有数据，
}];
var图；
函数createChart（chartData）{
//实例化地图
chart=新的Highcharts.mapChart（'容器'{
图表：{
边框宽度：1
},
标题：{
文字：“12月产品地图”
},
副标题:{
正文：'https://stackoverflow.com/questions/47646879/cant-show-the-color-in-interactive-highchart-choropleth-map'
},
图例：{
已启用：false
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
},
系列：[{
名称：'国家'，
mapData:Highcharts.maps['countries/tw/tw all']，
数据：图表数据，
数据标签：{
启用：对，
颜色：“#FFFFFF”，
格式化程序：函数（）{
if（此点的值）{
返回this.point.name；
}
}
},
工具提示：{
总部：''，
pointFormat:“{point.name}”
}
}]
});
}
window.updateChart=函数（选择）{
如果（选择==“”）{
createChart（数据_系列[3]。数据）；
}else if（选择==“橙色”）{
createChart（数据系列[0]。数据）
}else if（选择==“卷心菜”）{
createChart（数据系列[1]。数据）
}else if（选择==“花生”）{
createChart（数据系列[2]。数据）
}
}
//开始渲染----------------------------------------------
updateChart（“”）

产品：
挑选
橙色
卷心菜
花生


您可以根据需要更新代码


var数据\u橙色=[
[tw-pt'，1]，
[tw-ml'，1]，
[tw-il'，1]
];
变量数据=[
[tw-hl'，1]，
[tw-nt'，1]
];
var数据_=[
[tw-tw'，1]，
[tw-tp'，1]
];
var all_数据=[
[tw-pt'，1]，
[tw-ml'，1]，
[tw-il'，1]，
[tw-hl'，1]，
[tw-nt'，1]，
[tw-tw'，1]，
[tw-tp'，1]，
]
var数据_系列=[{
名称：“橙色”，
数据：橙色数据
}, {
名字：'卷心菜'，
数据：数据
}, {
名字：“花生”，
数据：data\u花生
}, {
名称：'全部'，
数据：所有数据，
}];
var图；
函数createChart（chartData）{
//实例化地图
chart=新的Highcharts.mapChart（'容器'{
图表：{
边框宽度：1
},
标题：{
文字：“12月产品地图”
},
副标题:{
正文：'https://stackoverflow.com/questions/47646879/cant-show-the-color-in-interactive-highchart-choropleth-map'
},
图例：{
已启用：false
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
},
系列：[{
名称：'国家'，
mapData:Highcharts.maps['countries/tw/tw all']，
数据：图表数据，
数据标签：{
启用：对，
颜色：“#FFFFFF”，
格式化程序：函数（）{
if（此点的值）{
返回this.point.name；
}
}
},
工具提示：{
总部：''，
pointFormat:“{point.name}”
}
}]
});
}
window.updateChart=函数（选择）{
如果（选择==“”）{
createChart（数据_系列[3]。数据）；
}else if（选择==“橙色”）{
createChart（数据系列[0]。数据）
}else if（选择==“卷心菜”）{
createChart（数据系列[1]。数据）
}else if（选择==“花生”）{
createChart（数据系列[2]。数据）
}
}
//开始渲染----------------------------------------------
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>

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("");