amcharts 不能在同一页面中使用两个图表

Question

我正在使用 amcharts“分解切片的饼图”(https://www.amcharts.com/demos/pie-chart-broken-slices/)

当我添加两个图表时，我没有呈现问题。当我单击第一个图表时会出现问题。这张图表被第二张图表替换了，现在我有两张图表，里面有第二张的信息。

第一个图表的源代码：

<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。