HighCharts甜甜圈图下钻 - HighCharts donut chart drilldown

HighCharts donut chart drilldown

本文关键字：甜甜圈 HighCharts | 更新日期: 2023-09-27

我在Yii框架中创建具有两层的HighChart甜甜圈图时遇到了麻烦。这是我用来获得一个单层图的代码:

<?php 
$this->widget('bootstrap.widgets.TbHighCharts', array(
   // .. 'options', 'chart', 'legend', .. 
   'series' => array(
   array(
      'type' => 'pie',
      'name' => 'Series of Browsers',
      'data' => array(array('MSIE', 55), array('Firefox',10), array('Chrome',15), array('Safari', 20)),
   ),
   // ..
?>

但是在highchart网站上，我只能找到关于如何实现"钻下"的java示例。你有一个解决方案来实现相同的php在Yii?

提前感谢您的帮助!

—Edit—

在java中，我必须这样做:

drilldown: {
   name: 'MSIE',
   categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
   data: [10.85, 7.35, 33.06, 2.81]
}

但是在Yii中使用小部件时等效的操作是什么?

终究是我自己发现的。希望这个答案对其他人也有帮助。

<?php 
  $this->widget('bootstrap.widgets.TbHighCharts', array(
    'chart' => array(
      'borderColor'=>'#e5e5e5',
      'type' => 'pie',
    ),
    // .. 'options', 'legend', .. 
    'series' => array(
      // --------- inner layer of the pie
      array(
        'size' => '40%',
        'data' => array(
          array(
            'name' => //name
            'y' => //value
          ),
          array(
            'name' => //name
            'y' => //value
          ),
        ),
     ),
     // -------- second layer from the inside
     array(
        'size' => '60%',
        'innerSize' => '40%',
        'data' => array(
          array(
            'name' => //name
            'y' => //value
          ),
          array(
            'name' => //name
            'y' => //value
          ),
        ),
     ),
     // ----- add as manny layers as you need to
    ),
    // ..
  );
?>

要注意，因为层之间并不是直接相连的。这意味着你必须明智地设置值'y'，以便使图层之间的边界匹配。