amcharts не может использовать две карты в одной и той же странице

Question

Я использую amcharts «Круговая диаграмма с разбивкой дольки» (https://www.amcharts.com/demos/pie-chart-broken-slices/)

Когда я добавляю две диаграммы Я не оказывают проблем. Проблема возникает, когда я нажимаю на первом графике. Эта диаграмма заменяется вторым графиком, и теперь у меня есть 2 диаграммы с информацией второго.

Исходный код первой карты:

<div id="chartdevicesdiv" style="width: 100%; height: 500px"></div> 

<script> 
var chart; 
var legend; 
var selected; 

var types = [{ 
    type: "Smartphone", 
    percent: 45, 
    total: 150, 
    color: "#71c66b", 
    subs: [{ 
    type: "iOS", 
    percent: 15 
    }, { 
    type: "Android", 
    percent: 35 
    }, { 
    type: "Other", 
    percent: 20 
    }] 
}, { 
    type: "Tablet", 
    percent: 15, 
    total: 30, 
    color: "#f2a013", 
    subs: [{ 
    type: "iOS", 
    percent: 15 
    }, { 
    type: "Android", 
    percent: 10 
    }, { 
    type: "Other", 
    percent: 5 
    }] 
}, 
{ 
    type: "Desktop", 
    percent: 40, 
    total: 75, 
    color: "#4f98f7", 
    subs: [{ 
    type: "Windows", 
    percent: 15 
    }, { 
    type: "Mac", 
    percent: 10 
    }, { 
    type: "Linux", 
    percent: 5 
    }] 
}]; 

function generateChartData() { 
    var chartData = []; 
    for (var i = 0; i < types.length; i++) { 
    if (i == selected) { 
     for (var x = 0; x < types[i].subs.length; x++) { 
     chartData.push({ 
      type: types[i].subs[x].type, 
      percent: types[i].subs[x].percent, 
      color: types[i].color, 
      pulled: true 
     }); 
     } 
    } else { 
     chartData.push({ 
     type: types[i].type, 
     percent: types[i].percent, 
     color: types[i].color, 
     id: i 
     }); 
    } 
    } 
    return chartData; 
} 

AmCharts.makeChart("chartdevicesdiv", { 
    "type": "pie", 
"theme": "light", 

    "dataProvider": generateChartData(), 
    "labelText": "[[title]]: [[value]]%", 
    "balloonText": "[[title]]: [[value]]%", 
    "titleField": "type", 
    "valueField": "percent", 
    "outlineColor": "#FFFFFF", 
    "outlineAlpha": 0.8, 
    "outlineThickness": 2, 
    "colorField": "color", 
    "pulledField": "pulled", 
    "titles": [{ 
    "text": "Devices stats" 
    }], 
    "listeners": [{ 
    "event": "clickSlice", 
    "method": function(event) { 
     var chart = event.chart; 
     if (event.dataItem.dataContext.id != undefined) { 
     selected = event.dataItem.dataContext.id; 
     } else { 
     selected = undefined; 
     } 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    } 
    }], 
    "export": { 
    "enabled": true 
    } 
}); 
</script> 

и здесь, в одной и той же странице, источник второй диаграммы

<div id="chartsourcesdiv" style="width: 100%; height: 500px"></div> 

<script> 
var chart; 
var legend; 
var selected; 

var types = [{ 
    type: "tself", 
    percent: 70, 
    color: "#267be2", 
}, { 
    type: "widget", 
    percent: 30, 
    color: "#aa9cb7", 
}]; 

function generateChartData() { 
    var chartData = []; 
    for (var i = 0; i < types.length; i++) { 
    if (i == selected) { 
     for (var x = 0; x < types[i].subs.length; x++) { 
     chartData.push({ 
      type: types[i].subs[x].type, 
      percent: types[i].subs[x].percent, 
      color: types[i].color, 
      pulled: true 
     }); 
     } 
    } else { 
     chartData.push({ 
     type: types[i].type, 
     percent: types[i].percent, 
     color: types[i].color, 
     id: i 
     }); 
    } 
    } 
    return chartData; 
} 

AmCharts.makeChart("chartsourcesdiv", { 
    "type": "pie", 
"theme": "light", 

    "dataProvider": generateChartData(), 
    "labelText": "[[title]]: [[value]]%", 
    "balloonText": "[[title]]: [[value]]%", 
    "titleField": "type", 
    "valueField": "percent", 
    "outlineColor": "#FFFFFF", 
    "outlineAlpha": 0.8, 
    "outlineThickness": 2, 
    "colorField": "color", 
    "pulledField": "pulled", 
    "titles": [{ 
    "text": "Sources" 
    }], 
    "listeners": [{ 
    "event": "clickSlice", 
    "method": function(event) { 
     var chart = event.chart; 
     if (event.dataItem.dataContext.id != undefined) { 
     selected = event.dataItem.dataContext.id; 
     } else { 
     selected = undefined; 
     } 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    } 
    }], 
    "export": { 
    "enabled": true 
    } 
}); 
</script> 

Answer 1

Проблема вы повторно использовать ту же переменную имена для данных обеих диаграмм. Когда вы переопределяете переменную types, вы перезаписываете предыдущее объявление, поэтому любой щелчок будет использовать данные переменной types. Чистый способ исправить это - изменить переменные типов, чтобы иметь уникальные имена, а затем изменить свою функцию generateChartData (вам нужен только один, поскольку они оба делают то же самое), чтобы принять параметр.

var chart1types = [ /* data */ ]; 
var chart2types = [ /* data */ ]; 

function generateChartData(types) { 
    //same code from before 
} 

AmCharts.makeChart("chartdevicesdiv", { 
    // ... 
    "dataProvider": generateChartData(chart1types), //use first types variable 
    // ... 
    "listeners": [{ 
    "event": "clickSlice", 
    "method": function(event) { 
     var chart = event.chart; 
     if (event.dataItem.dataContext.id != undefined) { 
     selected = event.dataItem.dataContext.id; 
     } else { 
     selected = undefined; 
     } 
     chart.dataProvider = generateChartData(chart1types); //use first types variable 
     chart.validateData(); 
    } 
    }], 
    // ... 
}); 


AmCharts.makeChart("chartsourcesdiv", { 
    // ... 
    "dataProvider": generateChartData(chart2types), //use second types variable 
    // ... 
    "listeners": [{ 
    "event": "clickSlice", 
    "method": function(event) { 
     var chart = event.chart; 
     if (event.dataItem.dataContext.id != undefined) { 
     selected = event.dataItem.dataContext.id; 
     } else { 
     selected = undefined; 
     } 
     chart.dataProvider = generateChartData(chart2types); //use second types variable 
     chart.validateData(); 
    } 
    }], 
    // ... 
}); 

Адрес demo исправления.