开发者问题收集

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

2017-01-27
6823
javascript amcharts

我正在使用 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>
1个回答

问题在于，您对两个图表的数据重复使用了相同的变量名。当您重新声明变量 types 时，会覆盖之前的声明，因此任何点击都将使用第二个 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();
    }
  }],
  // ...
});

以下是修复的 演示 。

xorspark
2017-01-27