Highchart - Bell заполнение кривых цветов на основе процентного

Question

Что я работаю над, чтобы создать кривой колокол и заливку кривой с цветом, чтобы показать, что у вас есть 50 % или 60 % т.д.

Что я сделал до сих пор: Создал кривую колокола с использованием spline chart в highcharts, теперь я хочу ограничить цвет внутри диаграммы на основе процентного соотношения пользователя. Я понятия не имею, как это можно сделать в highchart, Может ли кто-нибудь указать мне в правильном направлении.

Я попытался изменить цвет на основе http://www.highcharts.com/plugin-registry/single/33/Multicolor%20series, но это повлияло на кривую звонка.

Вот ссылка скрипку: http://jsfiddle.net/decs7eg1/5/

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'areaspline' 
    }, 
    title: { 
     text: 'Average score' 
    }, 
    legend: { 
     enabled:false 
    }, 
    xAxis: { 
     categories: [ 
      '0', 
      '25', 
      '50', 
      '75', 
      '100' 
     ] 
    }, 
    yAxis: { 
     title: { 
      text: 'Fruit units' 
     } 
    }, 
    tooltip: { 
     enabled:false 
    }, 
    credits: { 
     enabled: false 
    }, 
    plotOptions: { 
     enabled:false 
    }, 
    series: [ { 
     name: 'Jane', 
     data: [0, 0.5, 2, 0.5, 0] 
    }] 
    }); 
}); 

Answer 1

Вы не можете достичь того же вывода, используя areaspline тип highchart

Я добавляю две демки один с помощью areaspline и другой простой line использование диаграмм в соответствии с вашими требованиями:

1. areaspline:http://jsfiddle.net/decs7eg1/8/
2. линия:http://jsfiddle.net/decs7eg1/7/
3. Вертикальная areaspline:http://jsfiddle.net/decs7eg1/10/

Для этого просто добавьте эти строки в коде:

zones: [{ 
       value: 0, 
       color: 'red' 
      }, { 
       value: 0.5, 
       color: 'yellow' 
      }, { 
       value: 1, 
       color: 'blue' 
      }, { 
       value: 2, 
       color: 'green' 
      }] 

Для дальнейших ссылок см по этой ссылке: http://www.highcharts.com/docs/chart-concepts/series