我想在<google-chart> geo map element shown in this jsBin中选择状态。
当我选择一个状态时，我希望它能改变颜色（到深蓝色），但它保持相同的颜色（浅灰色）。
按照以下步骤重新创建问题：
dom-module＆gt;部分中<script>＆gt; properties＆gt; items＆gt; value，将数组['Alabama', 0]更改为['Alabama', 1]。Select变量的值为1表示阿拉巴马州（以及所有其他州的0）。['Alabama', 0]。items属性时按预期行为。< / LI>
items[1]数组的值为['Alabama', 1]。Select值为0（与上面手动更改时的情况不同）。这可能是什么问题？
我不确定but perhaps the solution involves properly implementing this advice？
处理
dom-repeat模板实例生成的事件时，您经常需要将触发事件的元素映射到生成该项的模型数据。
但是在这种情况下如何实现该解决方案？或者甚至是解决方案？
解决方案是什么？请在jsBin中显示它。
http://jsbin.com/pilotazifa/edit?html,console,output<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
google-chart {
width: 100%;
max-height: 300px;
}
</style>
<button on-tap="_show">Show</button>
<google-chart
id="geochart"
type="geo"
options={{options}}
data={{items}}
on-google-chart-select="_onGoogleChartSelect"
></google-chart>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
properties: {
items: {
type: Array,
notify: true,
reflectToAttribute: true,
value: function() {
return [['State', 'Select'], ['Alabama', 0], ['Alaska', 0], ['Arizona', 0], ['Arkansas', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Iowa', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Massachusetts', 0], ['Maryland', 0], ['Maine', 0], ['Michigan', 0], ['Minnesota', 0], ['Missouri', 0], ['Mississippi', 0], ['Montana', 0], ['North Carolina', 0], ['North Dakota', 0], ['Nebraska', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['Nevada', 0], ['New York', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Virginia', 0], ['Vermont', 0], ['Washington', 0], ['Wisconsin', 0], ['West Virginia', 0], ['Wyoming', 0]];
}
},
options: {
type: Object,
notify: true,
reflectToAttribute: true,
value: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: '#F5F5F5',
colorAxis: {
colors: ['#F5F5F5', '#455A64'],
minValue: 0,
maxValue: 1,
}
}
}
},
},
_onGoogleChartSelect: function(e) {
var str = e.path[0].textContent.split('Select')[0].trim(),
ar = this.items,
i = ar.length;
while(i---1){
if(str === ar[i][0]){
this.set('items.' + i + '.1', ar[i][1] ? 0 : 1);
}
}
console.log(this.items);
},
_show: function() {
console.log(this.items);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
</html>
答案 0 :(得分：1)
你必须在一段时间后添加到函数_onGoogleChartSelect。它再次生成数据并绘制图表。
this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);
也可以使用
this.items[i]= ...
而不是
// this will fire event every time and I think that in this case you dont need it.
this.set(...)
因为谷歌图表要求使用ajax数据，所以数据没有绑定。 所以解决方案是将数据插入到绘制图表的函数中。
答案 1 :(得分：0)
@Alon解决方案的完整文本如下：
http://jsbin.com/redaqezare/1/edit?html,output<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
google-chart {
width: 100%;
max-height: 300px;
}
</style>
<google-chart
id="geochart"
type="geo"
options={{options}}
data={{items}}
></google-chart>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
ready:function(){
this.items=[['State', 'Select'], ['Alabama', 0], ['Alaska', 0], ['Arizona', 0], ['Arkansas', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Iowa', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Massachusetts', 0], ['Maryland', 0], ['Maine', 0], ['Michigan', 0], ['Minnesota', 0], ['Missouri', 0], ['Mississippi', 0], ['Montana', 0], ['North Carolina', 0], ['North Dakota', 0], ['Nebraska', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['Nevada', 0], ['New York', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Virginia', 0], ['Vermont', 0], ['Washington', 0], ['Wisconsin', 0], ['West Virginia', 0], ['Wyoming', 0]];
var _this=this;
this.$.geochart.addEventListener('google-chart-select',function(e){this._onGoogleChartSelect(e)}.bind(_this));
},
properties: {
items: {
type: Array,
notify: true,
reflectToAttribute: true
},
options: {
type: Object,
notify: true,
reflectToAttribute: true,
value: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: '#F5F5F5',
colorAxis: {
colors: ['#F5F5F5', '#455A64'],
minValue: 0,
maxValue: 1,
}
}
}
},
},
_onGoogleChartSelect: function(e) {
var str = e.path[0].textContent.split('Select')[0].trim(),
ar = this.items,
i = ar.length;
while(i---1){
if(str === ar[i][0]){
this.items[i][1]= ar[i][1] ? 0 : 1;
}
}
this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
</html>