Question

页面上有两个以上的饼图。单击饼图的一部分应反映在其他饼图上。如果某个饼图的一部分被拉出，则另一个饼图的最后一个被拉出的切片应被拉入。在这里，我没有拉出slice（pullOutRadius：0）。我尝试使用事件“ clickSlice”和“ pullOut”。

var pie_chart = [];
make_Pie_1();
make_Pie_2();
make_Pie_3();

function make_Pie_1() {
  pie_chart[0] = AmCharts.makeChart("chart_pie_1", return_pie_chart("Chart 1"));
}

function make_Pie_2() {
  pie_chart[1] = AmCharts.makeChart("chart_pie_2", return_pie_chart("Chart 2"));
}
function make_Pie_3() {
  pie_chart[2] = AmCharts.makeChart("chart_pie_3", return_pie_chart("Chart 3"));
}

var prev_slice = "";
var prev_slice_div = "";
var chart_name = "";
var prev_index = null;

function return_pie_chart(title) {
  return {
    "type": "pie",
    "theme": "light",
    "dataProvider": [{
      "title": "New",
      "value": 4852
    }, {
      "title": "Returning",
      "value": 9899
    }],
    "allLabels": [{
      "y": "50%",
      "align": "center",
      "size": 10,
      "bold": true,
      "text": title,
      "color": "black"
    }],
    "valueField": "value",
    "titleField": "title",
    "colorField": "color",
    "innerRadius": "70%",
    "pullOutRadius": 0,
    "labelsEnabled": false,
    "pullOutOnlyOne": true,
    "listeners": [{
        "event": "clickSlice",
        "method": function(e) {
          console.log("clickSlice");
          var chart = e.chart;
          for (var i = 0; i < chart.dataProvider.length; i++) {
            var color = e.dataItem.index == i || chart.selectedIndex === e.dataItem.index ? chart.colors[i] : "#eee";
            chart.dataProvider[i].color = color;
          }
          if (chart.selectedIndex !== undefined)
            delete chart.selectedIndex;
          else
            chart.selectedIndex = e.dataItem.index;
          chart.validateData();
        }
      },
      {
        "event": "pullOutSlice",
        "method": function(e) {
          console.log("pullOutSlice");
          var slice = e.dataItem.dataContext.code;
          var slice_div = e.chart.div.id;
          if ((slice === prev_slice) && (slice_div === prev_slice_div)) {
            console.log("same click");
            prev_slice = "";
            prev_slice_div = "";
            prev_index = null;
          } else {
            console.log("diff click");
            if (prev_index !== null) {
              chart_name.clickSlice(prev_index);
            }
            prev_index = e.dataItem.index;
            //chart_name.pulledField = "pullIn";
            prev_slice = slice;
            prev_slice_div = slice_div;
            chart_name = e.chart;
            //chart_name = e.chart.allLabels["0"].text;
          }
        }
      }
    ]
  }
}

.chartdiv {
  width: 100%;
  height: 200px;
  font-size: 11px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="chartdiv" id="chart_pie_1"></div>
<div class="chartdiv" id="chart_pie_2"></div>
<div class="chartdiv" id="chart_pie_3"></div>

这里的问题是：

如果单击饼图的一个切片，然后再次单击同一饼图的另一个切片，此后，如果单击另一个饼图的一个切片，则不会取消选择先前选择的切片。
例如：单击“图1”的一部分

-点击“切片1”的另一片

-单击“图2”的切片（仍选择了图1的所选切片）

有什么办法可以做到这一点？目标是单击一个切片，然后取消选择其他图表已单击的切片。

Answer 1

我提出了一个解决方案：只需握住最后一张图表，然后将颜色更改为default和validateData

{
  "event": "clickSlice",
  "method": function(e) {
    var chart;
    if (prev_chart !== "") {
      chart = prev_chart;
      for (var i = 0; i < chart.dataProvider.length; i++) {
        var color = chart.colors[i];
        chart.dataProvider[i].color = color;
      }
      chart.validateData();
    }
    chart = e.chart;
    for (var i = 0; i < chart.dataProvider.length; i++) {
      var color = e.dataItem.index === i || chart.selectedIndex === e.dataItem.index ? chart.colors[i] : "#eee";
      chart.dataProvider[i].color = color;
    }
    if (chart.selectedIndex !== undefined)
      delete chart.selectedIndex;
    else
      chart.selectedIndex = e.dataItem.index;
    chart.validateData();
    prev_chart = chart;
  }
}

饼图的“ pullIn”切片，另一饼图的“ pullout”切片-Amcharts

1 个答案: