Question

如何将双层高图甜甜圈图表制作成3D图表？基本上将以下链接中的高图示例转换为3D。

http://www.highcharts.com/demo/pie-donut

Answer 1

只需从提供的示例中为图表添加3d选项即可。如果要为每个系列设置选项，请在系列对象中指定它们，而不是plotoptions.pie。

示例：

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({
    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',
    options3d: {
      enabled: true,
      alpha: 45
    }
  },
  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%'],
          innerSize: 100,
          depth: 45
        }*/
  },
  tooltip: {
    valueSuffix: '%'
  },
  series: [{
    shadow: false,
    center: ['50%', '50%'],
    innerSize: 100,
    depth: 45,
    name: 'Browsers',
    data: browserData,
    size: '60%',
    dataLabels: {
      formatter: function() {
        return this.y > 5 ? this.point.name : null;
      },
      color: '#ffffff',
      distance: -30
    }
  }, {
    shadow: false,
    center: ['50%', '60%'],
    innerSize: 100,
    depth: 45,
    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;
      }
    }
  }]
});

实例： http://jsfiddle.net/5c2xc32g/

Highchart 2Layer 3D甜甜圈图表

1 个答案: