Как создать круговую диаграмму с данными только 1 серии и иметь фон в виде круга - PullRequest
Новая
       6

Как создать круговую диаграмму с данными только 1 серии и иметь фон в виде круга

0 голосов
/ 15 января 2019

Хорошо, используя старшие диаграммы, и мне нужно создать круговую диаграмму только с 1 данными, а остальная часть круга - это серая линия, которая ничего не делает. Есть ли в любом случае, чтобы сделать это? В настоящее время, используя следующий код, я должен установить точку данных так, чтобы она содержала процент, но не смог отключить серую секцию на этом рисунке: pic of what I have

Но мне нужно, чтобы серая часть была недоступна для выбора, и она мне помогла бы, если бы она больше походила на дизайн в том смысле, что серая часть тоньше. Дизайн здесь: pic of what I need

Мои текущие параметры для этой круговой диаграммы следующие: 

    {  
   "chart":{  
      "renderTo":"amenity-0",
      "plotBackgroundColor":null,
      "plotBorderWidth":0,
      "plotShadow":false,
      "height":220,
      "marginBottom":40,
      "spacingBottom":30
   },
   "title":{  
      "text":"Amenity 1",
      "align":"center",
      "verticalAlign":"bottom",
      "y":15
   },
   "credits":{  
      "enabled":false
   },
   "tooltip":{  
      "headerFormat":"",
      "pointFormat":"{point.name}: <b>{point.percentage:.1f}%</b>"
   },
   "plotOptions":{  
      "pie":{  
         "dataLabels":{  
            "enabled":true,
            "distance":-50,
            "style":{  
               "fontWeight":"bold",
               "color":"white"
            }
         },
         "startAngle":0,
         "endAngle":360,
         "center":[  
            "50%",
            "50%"
         ],
         "size":"100%"
      }
   },
   "series":[  
      {  
         "type":"pie",
         "name":"Amenity 1",
         "innerSize":"60%",
         "data":[  
            {  
               "name":"Amenity 1",
               "y":69,
               "color":"#C1AFBD",
               "dataLabels":{  
                  "enabled":false
               }
            },
            {  
               "name":"Gray Section",
               "y":31,
               "color":"#E9EDF0",
               "dataLabels":{  
                  "enabled":false
               }
            }
         ]
      }
   ]
}

Я попытался использовать функцию pointFormatter вместо pointFormat и вернуть false, если point.name === 'Grey Section', но это не удалило всплывающую подсказку. Он просто создал пустую подсказку. В любом случае, я бы хотел, чтобы серая часть была тоньше, как в дизайне, и не была бы частью данных, если это возможно.

Возможно ли это? Есть идеи, как этого добиться? Спасибо, ребята / девочки.

1 Ответ

0 голосов
/ 16 января 2019

Что касается всплывающей подсказки, вы можете использовать какое-то условие для общего tooltip.formatter, чтобы отключить всплывающую подсказку для данной точки, например, установить noTooltip для данной точки. Например ( JSFiddle ): 

tooltip: {
    formatter: function() {
        if(!this.point.noTooltip) {
            return '<span style="color:' + this.point.color + '">●</span>' + 
                this.series.name + '<br/>' + 
                'Value: ' + this.point.y + '<br/>';
        }

        return false;
    },
    hideDelay: 0
},
series: [{
    data: [{
        y: 70
    }, {
        y: 30,
        noTooltip: true
    }]
}]

Что касается более тонкой серой секции, вы можете использовать вместо нее variablepie и устанавливать различные значения z, чтобы фактическое значение выделялось больше. Например ( JSFiddle ): 

chart: {
    type: 'variablepie'
},
series: [{
    innerSize: '40%',
    zMin: 0,
    zMax: 100,
    data: [{
        y: 70,
        z: 10,
    }, {
        y: 30,
        z: 0.1,
        color: 'lightgray'
    }]
}]

Для этого требуется следующий импортированный модуль: 

<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
...