Highcharts Круговая Процент График

Я использую Highcharts, и мне интересно, если это возможно для Highcharts сделать круговые диаграммы, подобные этим:Highcharts Круговая Процент График

Circular Charts

У меня есть, но она заполняет весь круг вместо всего 60% круга (вот скрипка: http://jsfiddle.net/fccuw47y/1/).

$(function() { 
    // Create the chart 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 
     title: { 
      text: '' 
     }, 
     plotOptions: { 
      pie: { 
       shadow: false 
      } 
     }, 
     series: [{ 
      name: 'Browsers', 
      data: [["Total",60]], 
      size: '100%', 
      innerSize: '95%', 
      showInLegend:false, 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 
});

источник

2015-07-14 Get Off My Lawn

С. у вас есть ответы, которые показывают, как это сделать, я брошу это там: это ужасно неэффективный способ отображения данных (популярно, хотя это может быть). Особенно при отображении нескольких мер - очень неэффективных (когнитивно) для пользователя, которые в любом случае будут выглядеть больше, чем число, чем график, и очень сложно сравнивать между показателями - как и в большинстве случаев, гистограмма сделает работу намного эффективнее , FWIW – jlbriggs

Это только для приборной панели, они могут видеть фактическую детализацию на другой странице. –

Я не хочу расстраивать ситуацию, но панель - это именно то место, где большой, неэффективный дисплей данных является самым неуместным. Панели мониторинга должны быть простыми, эффективными, сжатыми визуализацией данных, а не большими, красочными, пространственными, неэффективными дисплеями. Очевидно, вам нужно делать то, что вам нужно, но ... для записи ... – jlbriggs

Мы только что реализовали аналогичную диаграмму, используя тип solidgauge в Highcharts.

Вы можете использовать piechart, но круговая диаграмма всегда будет заполнять 100%. Это характер зверя. Если вы хотите использовать piechart, вы должны будете предоставить ему сумму для остатка (пустое пространство). Например, ваш series.data должен быть

[["Total", 60], ["Empty", 40]]

Ниже приведен пример использования типа solidgauge диаграммы. Это намного более гибкий и, кажется, более естественный выбор в этом случае.

http://jsfiddle.net/morqp9at/

источник

2015-07-14 02:53:05

Это прекрасно! Даже серый трек, который я тоже хочу! –

Вы можете установить цвет точки данных серии быть прозрачным:

$(function() { 
    // Create the chart 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 
     title: { 
      text: '' 
     }, 
     plotOptions: { 
      pie: { 
       shadow: false 
      } 
     }, 
     series: [{ 
      name: 'Browsers', 
      data: [ 
       [ "Completed", 60], 
       { 
        "name": "Incomplete", 
        "y": 40, 
        "color": 'rgba(0,0,0,0)' 
       } 
      ], 
      size: '100%', 
      innerSize: '95%', 
      showInLegend:false, 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 
});

Это дает «полный» круг с «завершенного» часть заполненной

источник

2015-07-14 02:56:24

Highcharts Круговая Процент График

ответ

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