2017-02-17 18 views
0

Я пытаюсь создать пирог круговых диаграмм, как они показывают в excel. Я не мог найти пирог поддержки пирога в highcharts. Я могу создать две круговые диаграммы, но я не могу подключить их к линиям, как показано на рисунке ниже. Есть ли обходной путь для этого?Пирог круговых диаграмм в Highcharts

Pie of pie charts

+0

Существует нет типа пироги пироги - но вы можете достичь результата с некоторым кодированием. Вы можете наложить несколько пирогов на область графика ([пример] (http://jsfiddle.net/1rvLjewu/)), а затем использовать [Renderer] (http://api.highcharts.com/highcharts/Renderer) для создания пользовательских формы, в этом случае линии, соединяющие срезы. – morganfree

ответ

0

вы должны использовать drilldown. если вы щелкните по фрагменту, чем переключатель диаграммы на внутренние данные.

например:

Highcharts.chart('container', { 
 
    chart: { 
 
     type: 'pie', 
 
    }, 
 
    
 
    series: [{ 
 
     name: 'out', 
 
     data: [{ 
 
      name: 'data 1', 
 
      y: 55, 
 
      drilldown: 'data 1' 
 
     },{ 
 
      name: 'data 2', 
 
      y: 45, 
 
      drilldown: 'data 2' 
 
     }] 
 
    }], 
 
    
 
    drilldown: { 
 
     series: [{ 
 
      name: 'inner 1', 
 
      id: 'data 1', 
 
      data: [ 
 
       ['inner 1-1', 24.13], 
 
       ['inner 1-2', 17.2], 
 
       ['inner 1-3', 8.11], 
 
       ['inner 1-4', 5.33], 
 
       ['inner 1-5', 1.06], 
 
       ['inner 1-6', 0.5] 
 
      ] 
 
     }, { 
 
      name: 'inner 2', 
 
      id: 'data 2', 
 
      data: [ 
 
       ['inner 2-1', 5], 
 
       ['inner 2-2', 4.32], 
 
       ['inner 2-3', 3.68], 
 
       ['inner 2-4', 2.96], 
 
       ['inner 2-5', 2.53], 
 
       ['inner 2-6', 1.45], 
 
       ['inner 2-7', 1.24], 
 
       ['inner 2-8', 0.85] 
 
      ] 
 
     }] 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<div id="container" style="height: 400px"></div>

 Смежные вопросы

  • Нет связанных вопросов^_^