highcharts - Highchart 双层 donut 将内部和外部 donut 滑动在一起

Question

当点击内部 donut 时，我试图将内部和其他 donut 滑出。在下面的链接中，只切掉了内部 donut 。

http://jsfiddle.net/bvL0r6tq/

我试图通过点选择选择外部切片，但它们没有一起移出。外部的在它们之间传播。

任何人都可以让我知道当点击内部 donut 时如何将内部和外部 donut 切掉而不在他们之间传播外部 donut 。

var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
    data = [{
        y: 56.33,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
            data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
            color: colors[0]
        }
    }, {
        y: 10.38,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
            data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
            color: colors[1]
        }
    }, {
        y: 24.03,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
                'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
                ],
            data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
            color: colors[2]
        }
    }, {
        y: 4.77,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
            data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
            color: colors[3]
        }
    }, {
        y: 0.91,
        color: colors[4],
        drilldown: {
            name: 'Opera versions',
            categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
            data: [0.34, 0.17, 0.24, 0.16],
            color: colors[4]
        }
    }, {
        y: 0.2,
        color: colors[5],
        drilldown: {
            name: 'Proprietary or Undetectable',
            categories: [],
            data: [],
            color: colors[5]
        }
    }],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

    // add browser data
    browserData.push({
            sliced: categories[i] == 'MSIE' ? true : false,
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market share, January, 2015 to May, 2015'
    },
    subtitle: {
        text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%'],
            slicedOffset: 20
        }
    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
        name: 'Browsers',
        data: browserData,
        size: '0%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: '#ffffff',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: versionsData,
        size: '80%',
        innerSize: '60%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
            }
        }
    }]
});

谢谢，
萨拉特

Answer 1

切片属性的当前实现是不可能的。但是，您可以通过一些努力来实现该功能。您需要移动具有相同浏览器的切片，因为它们将是一个点。

将您的数据拆分为内部系列和外部系列——每种浏览器类型一个外部系列。外部系列应该有不可见的点，因此您只能看到部分饼图。

series: [{
    name: 'Browsers',
    keys: ['y'],
    data: [40, 30, 30],
    size: '80%',
    innerSize: 0,
    slicedOffset: 20,
    colorByPoint: true
}, {
    data: [20, 20, {
      y: 60,
      visible: false
    }]
  }, {
    color: colors[1],
    data: [{
      y: 40,
      visible: false
    }, 10, 10, 10, {
      y: 30,
      visible: false
    }]
  }, {
    color: colors[2],
    data: [{
      y: 70,
      visible: false
    }, 5, 5, 5, 15]
  }]

单击事件时，您需要更新正确外部系列的中心 - 中心的平移应等于切片点的平移。

const translateSeries = function(series, center, translation) {
  const cx = center[0],
    cy = center[1];

  series.update({
    center: [cx + translation.translateX, cy + translation.translateY]
  });
};

const translate = function(e) {
  const innerSeries = this.chart.series[0];
  let point, series;

  if (this !== innerSeries) {
    point = innerSeries.data[this.index - 1];
    series = this;
  } else {
    point = e.point;
    series = this.chart.series[point.index + 1];
  }

  point.update({
    sliced: true
  }, false);
  translateSeries(series, innerSeries.center, point.slicedTranslation)
};

实时示例和输出

const colors = Highcharts.getOptions().colors;

const translateSeries = function(series, center, translation) {
  const cx = center[0],
    cy = center[1];

  series.update({
    center: [cx + translation.translateX, cy + translation.translateY]
  });
};

const translate = function(e) {
  const innerSeries = this.chart.series[0];
  let point, series;

  if (this !== innerSeries) {
    point = innerSeries.data[this.index - 1];
    series = this;
  } else {
    point = e.point;
    series = this.chart.series[point.index + 1];
  }

  point.update({
    sliced: true
  }, false);
  translateSeries(series, innerSeries.center, point.slicedTranslation)
};

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },

  plotOptions: {
    pie: {
      ignoreHiddenPoint: false,
      slicedOffset: 0,
      size: '80%',
      innerSize: '60%',
      colorByPoint: false,
      dataLabels: {
        enabled: false
      },
      events: {
        click: translate
      }
    }
  },

  series: [{
    name: 'Browsers',
    keys: ['y'],
    data: [40, 30, 30],
    size: '80%',
    innerSize: 0,
    slicedOffset: 20,
    colorByPoint: true
  }, {
    data: [20, 20, {
      y: 60,
      visible: false
    }]
  }, {
    color: colors[1],
    data: [{
      y: 40,
      visible: false
    }, 10, 10, 10, {
      y: 30,
      visible: false
    }]
  }, {
    color: colors[2],
    data: [{
      y: 70,
      visible: false
    }, 5, 5, 5, 15]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500"></div>