amcharts tidak dapat menggunakan dua grafik di halaman yang sama

Saya menggunakan amcharts "Bagan lingkaran dengan irisan yang dipecah" (https://www.amcharts.com/demos/pie-chart-broken-slices/)

Ketika saya menambahkan dua grafik, saya tidak mengalami masalah. Masalahnya terjadi ketika saya mengklik grafik pertama. Bagan ini digantikan oleh bagan kedua, dan sekarang saya memiliki 2 bagan dengan informasi yang kedua.

Kode sumber bagan pertama:

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

dan di sini, di halaman yang sama, sumber grafik kedua

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

Jawaban (1)


arrow_upward
7
arrow_downward

Masalahnya adalah Anda menggunakan kembali nama variabel yang sama untuk kedua data grafik. Saat Anda mendeklarasikan ulang variabel types, Anda menimpa deklarasi sebelumnya, sehingga setiap klik akan menggunakan data variabel types kedua. Cara bersih untuk memperbaikinya adalah dengan mengubah variabel tipe agar memiliki nama unik dan kemudian memodifikasi fungsi generateChartData Anda (Anda hanya memerlukan satu karena keduanya melakukan hal yang sama) untuk mengambil parameter.

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();
    }
  }],
  // ...
});

Berikut demo perbaikannya.

person xorspark    schedule 27.01.2017
comment
Apakah Anda juga mengubah fungsi generateChartData untuk mengambil parameter dan mengubah kode Anda untuk meneruskannya seperti yang saya tulis di kode saya? Baca seluruh jawaban saya, lihat kode di demo saya dan tinjau kode Anda dengan cermat. - person xorspark; 27.01.2017
comment
Hanya mengganti nama fungsi yang terpecahkan. Masalahnya adalah grafik pertama memanggil grafik pertama. Setiap fungsi berbeda jadi saya perlu membuat fungsi terpisah, tapi jelas dengan nama berbeda. Terima kasih! - person MGE; 27.01.2017