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>

javascript amcharts
person MGE    schedule 27.01.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Проблема в том, что вы повторно используете одни и те же имена переменных для данных обеих диаграмм. Когда вы повторно объявляете переменную 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();
    }
  }],
  // ...
});

Вот демонстрация исправления.

person xorspark    schedule 27.01.2017
comment
Вы также изменили функцию generateChartData, чтобы она принимала параметр и изменяла свой код для его передачи, как я написал в своем коде? Прочитайте весь мой ответ, посмотрите код в моей демонстрации и внимательно просмотрите свой код. - person xorspark; 27.01.2017
comment
Просто замена имени функции решена. Проблема заключалась в том, что первая диаграмма обращалась к первой диаграмме. Каждая функция отличается, поэтому мне нужно создать отдельные функции, но, очевидно, с разными именами. Спасибо! - person MGE; 27.01.2017