Эффект градиента с градиентным заполнением Highchart gauge

Question

Я планирую создать приборную панель для своего веб-приложения, у меня есть некоторые данные для графического отображения, чтобы показать, что планирование использования вами Activity Gauge (http://www.highcharts.com/demo/gauge-activity) и других графиков. Но в соответствии с нашим требованием нам необходимо создать эти графы с эффектом градиента с эффектом постепенного заполнения с двумя или более чем двумя цветами, см. Прикрепленный макет панели инструментов для лучшего понимания нашей мысли. Я приложил все усилия, чтобы сделать с Highchart линейными градиентами и радиальными градиентами, но логически это кажется невозможным.

У меня есть некоторые изменения, и я могу сделать дизайн как - http://jsfiddle.net/td2v4u4z/29/, но я потерял постепенно эффект на это.

вот мой исходный граф - http://jsfiddle.net/td2v4u4z/26/

Я хочу сделать это именно так -

Кроме того, это можно поместить метку внутри круга, как на изображении ниже -

Мой график выборки - http://jsfiddle.net/qambxkmo/13/

Пожалуйста, сообщите нам, как мы можем достичь этого дизайна с помощью Highchart.

Заранее благодарен!

Answer 1

Я не уверен, что вы подразумеваете под эффектом «постепенного заполнения», но я думаю, что вы можете задаться вопросом о начальной анимации на вашем графике.

Вы можете изменить функцию, ответственную за внесение вашего градиента, чтобы достичь графика с начальной анимацией. Я посылаю вам эту диаграмму ниже:

http://jsfiddle.net/td2v4u4z/31/

Если вы думаете, что это хорошая идея, чтобы иметь функциональность простых добавления градиентов к вашей калибровке, я думаю, что вы можете попросить эту функцию на Highcharts UserVoice , Лучшие идеи (с наибольшим количеством голосов) будут реализованы в будущих версиях Highcharts.

https://highcharts.uservoice.com/

В случае второго вопроса вы спросили, я думаю, что вы должны быть в состоянии добавить пользовательскую функцию для вращения вашего dataLabels, так что они будут внутри кольцевой диаграммы:

rotate = function() { 
    $.each(options.series, function(i, p) { 
    angle1 = 0; 
    angle2 = 0; 
    angle3 = 0; 
    allY = 0; 
    $.each(p.data, function(i, p) { 
     allY += p.y; 
    }); 
    $.each(p.data, function(i, p) { 
     p.dataLabels = p.dataLabels || {}; 
     angle2 = angle1 + p.y * 360/(allY); 
     angle3 = angle2 - p.y * 360/(2 * allY); 
     if (angle3 >= 180) { 
     p.dataLabels.rotation = 0 + angle3; 
     } else { 
     p.dataLabels.rotation = 0 + angle3; 
     } 
     angle1 = angle2; 
    }); 
    }); 
}; 

Я сделал простой пример, как он может работать: http://jsfiddle.net/j7as86gh/31/