Высокое заполнение области диаграммы

Question

Я использую область высокоуровневой диаграммы. То, что я пытаюсь достичь, если это возможно, - это когда диаграмма изначально рисует область области как один цвет. Когда пользователь выбирает другие параметры, тогда линии, которые рисуются, поступают другим цветом. Я пробовал использовать тему highcharts, и я также установил highcharts setOptions. Я также попробовал plotOptions. При щелчке он работает как обычно, добавляет дополнительную строку как черную. Но при повторном нажатии он добавляет еще одну строку, но как серый. Серого на сером, когда есть много строк, можно просто увидеть.

Прикрепленный является то, что диаграмма выглядит

Вот мой код: `Highcharts.setOptions ({ цвета: [ '# 778899', '# 000000'] });

$(selector).highcharts('StockChart', { 


    chart: { 
     height: 600, 
     borderRadius: 0 
    }, 
    credits: { 'enabled': false }, 
    legend: { 
     enabled: true, 
     borderRadius: 1, 
     borderWidth: 0, 
     itemStyle: { 
      fontSize: '11px'     
     }, 
     itemHiddenStyle: { 
      color: '#999999' 
     } 
    } 



    plotOptions: { 
     series: { lineWidth: 1 }, 
    area:{colors:['#000000']} 
    } 

}); `

Answer 1

Вы определили только два цвета: # 778899' , '# 000000'. Поэтому, когда вы добавляете 3-ю строку, она серая, 4-я строка будет черной и так далее. Пример с 4-мя линиями: http://jsfiddle.net/dpb3vcy0/1/

$(function() { 
    // Create the chart 
    Highcharts.setOptions({ 
     colors: ['#778899', '#000000'] 
    }); 

    $('#container').highcharts('StockChart', { 

     rangeSelector: { 
      inputEnabled: $('#container').width() > 480, 
      selected: 1 
     }, 

     series: [{ 
      name: 'nr 1', 
      data: [5, 1, 1], 
      type: 'area', 
      threshold: null, 
      tooltip: { 
       valueDecimals: 2 
      }, 
      fillColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, Highcharts.getOptions().colors[0]], 
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
       ] 
      } 
     }, { 
      name: 'nr 2', 
      data: [0, 0, 5, 5], 
      type: 'area', 
      threshold: null, 
      tooltip: { 
       valueDecimals: 2 
      }, 
      fillColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, Highcharts.getOptions().colors[0]], 
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
       ] 
      } 
     }, { 
      name: 'nr 3', 
      data: [0, 0, 0, 2, 2, 7], 
      type: 'area', 
      threshold: null, 
      tooltip: { 
       valueDecimals: 2 
      }, 
      fillColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, Highcharts.getOptions().colors[0]], 
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
       ] 
      } 
     }, { 
      name: 'nr 4', 
      data: [0, 0, 0, 0, 0, 1, 1, 4], 
      type: 'area', 
      threshold: null, 
      tooltip: { 
       valueDecimals: 2 
      }, 
      fillColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, Highcharts.getOptions().colors[0]], 
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
       ] 
      } 
     }] 
    }); 
});