Question

我正在尝试使用HighCharts在每个级别上使用不同的图表。例如- Level-1包含折线图（蜘蛛网）。 Level-2包含折线图（蜘蛛网）。 Level-3包含条形图。

我试过http://jsfiddle.net/rajeun/hdndm3dx/，但xAxis标题不再可点击了。当我尝试使用angularJs时也是如此：

$scope.chartConfig = {
  options: {
    chart: {
      polar: true,
      type: 'line'
    }
  },
  title: {
    text: 'Browser market shares. January, 2015 to May, 2015'
  },
  subtitle: {
    text: 'Click the slices to view versions. Source: netmarketshare.com.'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
      drilldown: 'Microsoft Internet Explorer'
    }, {
      name: 'Chrome',
      y: 24.03,
      drilldown: 'Chrome'
    }, {
      name: 'Firefox',
      y: 10.38,
      drilldown: 'Firefox'
    }, {
      name: 'Safari',
      y: 4.77,
      drilldown: 'Safari'
    }, {
      name: 'Opera',
      y: 0.91,
      drilldown: 'Opera'
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2,
      drilldown: null
    }]
  }],
  drilldown: {
    series: [{
      name: 'IE distribution',
      id: 'IE distribution',
      type: 'bar',
      data: [
        ['asia', 24.13],
        ['europe', 17.2],
        ['africa', 8.11]
      ]
    }, {
      name: 'Microsoft Internet Explorer',
      id: 'Microsoft Internet Explorer',
      data: [{
          name: 'v11.0',
          y: 24.13,
          drilldown: 'IE distribution'
        },
        ['v8.0', 17.2],
        ['v9.0', 8.11],
        ['v10.0', 5.33],
        ['v6.0', 1.06],
        ['v7.0', 0.5]
      ]
    }, {
      name: 'Chrome',
      id: 'Chrome',
      data: [
        ['v40.0', 5],
        ['v41.0', 4.32],
        ['v42.0', 3.68],
        ['v39.0', 2.96],
        ['v36.0', 2.53],
        ['v43.0', 1.45],
        ['v31.0', 1.24],
        ['v35.0', 0.85],
        ['v38.0', 0.6],
        ['v32.0', 0.55],
        ['v37.0', 0.38],
        ['v33.0', 0.19],
        ['v34.0', 0.14],
        ['v30.0', 0.14]
      ]
    }, {
      name: 'Firefox',
      id: 'Firefox',
      data: [
        ['v35', 2.76],
        ['v36', 2.32],
        ['v37', 2.31],
        ['v34', 1.27],
        ['v38', 1.02],
        ['v31', 0.33],
        ['v33', 0.22],
        ['v32', 0.15]
      ]
    }, {
      name: 'Safari',
      id: 'Safari',
      data: [
        ['v8.0', 2.56],
        ['v7.1', 0.77],
        ['v5.1', 0.42],
        ['v5.0', 0.3],
        ['v6.1', 0.29],
        ['v7.0', 0.26],
        ['v6.2', 0.17]
      ]
    }, {
      name: 'Opera',
      id: 'Opera',
      data: [
        ['v12.x', 0.34],
        ['v28', 0.24],
        ['v27', 0.17],
        ['v29', 0.16]
      ]
    }]
  }
};

没有用!!

这就是我打电话给我的高潮图的方式：

        <highchart id="container" config="chartConfig" style="min-width: 310px; height: 400px; margin: 0 auto"></highchart>

Answer 1

您可以在向下钻取事件回调中的seriesOptions中设置新类型。 http://jsfiddle.net/hdndm3dx/1/

events: {
        drilldown: function (obj) {
            var options = obj.seriesOptions;

            if (options.name == 'Microsoft Internet Explorer') {
                options.type = 'bar';
            }
          }
        }

向下钻取多个级别和多种类型的Highchart

1 个答案: