HIGHCHARTS Как сделать отдельные цвета для заштрихованной области и линии в Графе площади

Question

Мне нужно установить отдельные цвета в Графе области для затененной области и линии. Как я могу это сделать с помощью Highcharts.

Ниже приведен пример

Answer 1

Что вам нужно areaspline свойство Highcharts темной опции темы.

Вот пример;

$(function() { 
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { 

    $('#container').highcharts({ 
     chart: { 
      zoomType: 'x' 
     }, 
     title: { 
      text: 'USD to EUR exchange rate over time' 
     }, 
     subtitle: { 
      text: document.ontouchstart === undefined ? 
        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
     }, 
     xAxis: { 
      type: 'datetime' 
     }, 
     yAxis: { 
      title: { 
       text: 'Exchange rate' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      area: { 
       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')] 
        ] 
       }, 
       marker: { 
        radius: 2 
       }, 
       lineWidth: 1, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       threshold: null 
      } 
     }, 

     series: [{ 
      type: 'area', 
      name: 'USD to EUR', 
      data: data 
     }] 
    }); 
}); 

И this jsFiddle - это живая форма приведенного выше примера.

Важно:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/themes/dark-unica.js"></script> 

line; который дает темные темы к диаграмме.

Answer 2

следовать код ниже:

набор ниже код в ваш JavaScript и изменения цвета, которые вы хотите как ...

fillColor : { 
    linearGradient : {x1: 0, y1: 0, x2: 0, y2: 1}, 
    stops : [ [0, '#2a2a2b'], [1, '#3e3e40']], 
} 

ниже цвета присвоить линии

[0 , '# 2a2a2b']

[1, «# 3e3e40»]

над одним для заштрихованной области

Я уверен, что это поможет вам ... вам просто нужно добавить этот код и изменить вас код цвета, который вам нравится ...

Спасибо ...