Javascript 聚合物1.x:Geomap重入性
。用户按下全选按钮后，状态开始消失解决方案是什么？ 要重新创建问题，请执行以下步骤：Javascript 聚合物1.x:Geomap重入性,javascript,google-visualization,polymer,polymer-1.0,geomap,Javascript,Google Visualization,Polymer,Polymer 1.0,Geomap,。用户按下全选按钮后，状态开始消失解决方案是什么？ 要重新创建问题，请执行以下步骤： 单击全选按钮 将鼠标悬停在阿拉斯加州 请注意，当焦点位于阿拉斯加时，将显示包含州名称的悬停文本 选择阿拉斯加州 ❌ 请注意，填充颜色变为白色 ❌ 请注意，对于选定状态，焦点上不再有任何悬停文本 ❌ 请再次尝试选择它。注意什么也没发生 通过选择其他状态重复此操作 单击“全部清除”按钮 ❌ 请注意，以前选定的状态为白色，没有悬停焦点，而其相邻状态的填充颜色为灰色，并且有悬停文本 http://jsbin.com/
<!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%;
}
</style>
<br><br><br><br>
<button on-tap="_show">Show Values</button>
<button on-tap="clearAll">Clear All</button>
<button on-tap="selectAll">Select All</button>
<div>[[selectedString]]</div>
<google-chart id="geochart"
type="geo"
options="[[options]]"
data="[[data]]"
on-google-chart-select="_onGoogleChartSelect">
</google-chart>
</template>
<script>
(function() {
// Monkey patch for google-chart
var gcp = Object.getPrototypeOf(document.createElement('google-chart'));
gcp.drawChart = function() {
if (this._canDraw) {
if (!this.options) {
this.options = {};
}
if (!this._chartObject) {
var chartClass = this._chartTypes[this.type];
if (chartClass) {
this._chartObject = new chartClass(this.$.chartdiv);
google.visualization.events.addOneTimeListener(this._chartObject,
'ready', function() {
this.fire('google-chart-render');
}.bind(this));
google.visualization.events.addListener(this._chartObject,
'select', function() {
this.selection = this._chartObject.getSelection();
this.fire('google-chart-select', { selection: this.selection });
}.bind(this));
if (this._chartObject.setSelection){
this._chartObject.setSelection(this.selection);
}
}
}
if (this._chartObject) {
this._chartObject.draw(this._dataTable, this.options);
} else {
this.$.chartdiv.innerHTML = 'Undefined chart type';
}
}
};
Polymer({
is: 'x-element',
/** /
* Fired when user selects chart item.
*
* @event us-map-select
* @param {object} detail Alpabetized array of selected state names.
/**/
properties: {
items: {
type: Array,
value: function() {
return [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming', ].sort();
},
},
color: {
type: String,
value: 'blue',
},
options: {
type: Object,
computed: '_computeOptions(color)',
},
selected: {
type: Array,
value: function() {
return [];
}
},
data: {
type: Array,
computed: '_computeData(items, selected.length)'
},
selectedString: {
type: String,
computed: '_computeSelectedString(selected.length)',
},
},
_computeOptions: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: 'white',
colorAxis: {
colors: ['#E0E0E0', this.color],
minValue: 0,
maxValue: 1,
}
}
},
// On select event, compute 'selected'
_onGoogleChartSelect: function(e) {
var string = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
selected = this.selected, // Array of selected items
index = selected.indexOf(string);
// If 'string' is not in 'selected' array, add it; else delete it
if (index === -1) {
this.push('selected', string);
} else {
this.splice('selected', index, 1);
}
},
_computeSelectedString: function(selectedInfo) {
return this.selected.sort().join(', ');
},
// After 'items' populates or 'selected' changes, compute 'data'
_computeData: function(items, selectedInfo) {
var data = [],
selected = this.selected,
i = items.length;
while (i--) {
data.unshift([items[i], selected.indexOf(items[i]) > -1 ? 1 : 0]);
}
data.unshift(['State', 'Select']);
return data;
},
clearAll: function() {
this.set('selected', []);
},
selectAll: function() {
this.set('selected', this.items);
},
_show: function() {
//console.log('items', this.items);
console.log('selected', this.selected);
//console.log('data', this.data);
},
});
})();
</script>
</dom-module>
<x-element color="red" selected='["Colorado", "South Dakota"]'></x-element>
</body>
</html>
谷歌图表{
宽度：100%；
}
显示价值
清除所有
全选
[[selectedString]]
（功能（）{
//谷歌图表的猴子补丁
var gcp=Object.getPrototypeOf（document.createElement（'google-chart'）；
gcp.drawChart=函数（）{
如果（这个）{
如果（！this.options）{
this.options={}；
}
如果（！this.\u chartObject）{
var chartClass=this.\u chartTypes[this.type]；
if（图表类）{
this.\u chartObject=新的chartClass（this.$.chartdiv）；
google.visualization.events.addOneTimeListener（此.\u图表对象，
'ready'，function（）{
这个.fire（'google-chart-render'）；
}.约束（这个）；
google.visualization.events.addListener（此.\u图表对象，
'选择'，函数（）{
this.selection=this._chartObject.getSelection（）；
this.fire（'google-chart-select'，{selection:this.selection}）；
}.约束（这个）；
如果（此._chartObject.setSelection）{
this._chartObject.setSelection（this.selection）；
}
}
}
如果（此._图表对象）{
this.\u chartObject.draw（this.\u dataTable，this.options）；
}否则{
此.$.chartdiv.innerHTML='未定义的图表类型'；
}
}
};
聚合物({
是‘x元素’，
/** /
*当用户选择图表项时激发。
*
*@event-us-map-select
*@param{object}详细说明选定状态名称的标记数组。
/**/
特性：{
项目：{
类型：数组，
值：函数（）{
返回[“阿拉巴马州”、“阿拉斯加”、“亚利桑那州”、“阿肯色州”、“加利福尼亚州”、“科罗拉多州”、“康涅狄格州”、“特拉华州”、“佛罗里达州”、“乔治亚州”、“夏威夷州”、“爱达荷州”、“伊利诺伊州”、“印第安纳州”、“爱荷华州”、“堪萨斯州”、“肯塔基州”、“路易斯安那州”、“缅因州”、“马里兰州”、“马萨诸塞州”、“密歇根州”、“明尼苏达州”、“密西西比州”、“密苏里州”、“蒙大拿州”、“内布拉斯加州”、“内华达州”、“新罕布什尔州”、“东北州”西新泽西州、新墨西哥州、纽约州、北卡罗来纳州、北达科他州、俄亥俄州、俄克拉荷马州、俄勒冈州、宾夕法尼亚州、罗德岛州、南卡罗来纳州、南达科他州、田纳西州、德克萨斯州、犹他州、佛蒙特州、弗吉尼亚州、华盛顿州、西弗吉尼亚州、威斯康星州、怀俄明州……）。sort（）；
},
},
颜色：{
类型：字符串，
值：“蓝色”，
},
选项：{
类型：对象，
计算：''u计算选项（颜色）'，
},
选定：{
类型：数组，
值：函数（）{
返回[]；
}
},
数据：{
类型：数组，
计算：''u计算数据（项，选定的.length）'
},
所选字符串：{
类型：字符串，
计算：''u computeSelectedString（selected.length）'，
},
},
_computeOptions:函数（）{
返回{
地区:"美国",，
显示模式：“区域”，
决议：“各省”，
图例：“无”，
defaultColor:'白色'，
颜色轴：{
颜色：['#e0'，this.color]，
最小值：0，
最大值：1，
}
}
},
//在选择事件上，计算“已选择”
_OnGoogleChart选择：功能（e）{
var string=e.path[0]。textContent.split（'Select'）[0]。trim（），//例如“Ohio”
selected=this.selected，//所选项目的数组
索引=所选。indexOf（字符串）；
//如果“字符串”不在“选定”数组中，请添加它；否则请删除它
如果（索引==-1）{
this.push（'selected'，string）；
}否则{
此.拼接（'选定'，索引，1）；
}
},
_computeSelectedString:函数（selectedInfo）{
返回此.selected.sort（）.join（'，'）；
},
//“项目”填充或“选定”更改后，计算“数据”
_computeData:函数（项，selectedInfo）{
var数据=[]，
selected=this.selected，
i=项目长度；
而(我--){
数据.unshift（[items[i]，selected.indexOf（items[i]）>-1？1:0]）；
}
data.unshift（['State'，'Select']）；
返回数据；
},
clearAll:function（）{
此.set（'selected'，[]）；
},
selectAll:function（）{
此.set（'selected'，此.items）；
},
_show:function（）{
//控制台
selectAll: function() {
this.set('selected', this.items.slice());
}