2016-09-19 2 views
0

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

Я пробовал:

chart: { 
    renderTo: ‘container’, 
    background-color: ‘#ff0000’ 
}, 

и т.д ...

, но это только изменение фона всей диаграммы.

Вот скриншот, показывающий, что мне нужно изменить.

enter image description here

Как я могу это сделать?

Вот код тоже:

<script type="text/javascript"> 

    $(function() { 


      window.chart = new Highcharts.StockChart({ 

       chart: { 
        renderTo: 'container' 

       }, 

       rangeSelector: { 
        selected: 1, 
        inputDateFormat: '%d-%m-%Y', 
        inputDateParser: function (value) { 
         value = value.split('-'); 
         return Date.UTC(
          parseInt(value[2]), 
          parseInt(value[1]) - 1, 
          parseInt(value[0]) 
         ); 
        }, 
       }, 

       title: { 
        text: '' 
       }, 

       plotOptions: { 
        series: { 
         cursor: 'pointer', 
         point: { 
          events: { 
           click: function() { 


           } 
          } 
         } 
        } 
       }, 

       series: [{ 
        name: 'label', 
        data: data, 
        tooltip: { 
         valueDecimals: 2 
       }}] 

      }, function(chart) { 

       // apply the date pickers 
       setTimeout(function() { 
        $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker() 
       }, 0) 
      }); 



     // Set the datepicker's date format 
     $.datepicker.setDefaults({ 
      dateFormat: 'dd-mm-yy', 
      onSelect: function(dateText) { 
       this.onchange(); 
       this.onblur(); 

      } 
     }); 




    }); 

</script> 
+3

Вы должны использовать тип области вашей серии вместо типа линии. Затем в вашей серии областей вы можете добавить параметр fillColor: http://jsfiddle.net/Lf6wmr4g/ –

+0

Пробовал, что fillColor: 'rgba (200,100,100,0.5)', но он только окрасил аккуратную нижнюю часть диаграммы – QuepasaTio

+0

ТАК мог бы вы разместите изображение, показывающее, как вы хотите, чтобы ваш график выглядел? –

ответ

2

Попробуйте установить тип диаграммы на "зону" и указать FillColor:

chart: { 
    type: 'area' 
} 
plotOptions: { 
    area: { 
     fillColor: 'red' 
    } 
} 

Демо: http://jsfiddle.net/remisture/dsuLzpqL/

+0

Я добавил код ... где я могу добавить этот код? – QuepasaTio

-1

Часть серии называется ' зоны ", вы можете их окрасить следующим образом: http://api.highcharts.com/highcharts/plotOptions.line.zones

samp ле код:

series: [{ 
     data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5], 
     zones: [{ 
      value: 0, 
      color: '#f7a35c' 
     }, { 
      value: 10, 
      color: '#7cb5ec' 
     }, { 
      color: '#90ed7d' 
     }] 
    }] 

jsfiddle

+0

Это только окраска линий. Мне нужен фон ... как fillColor: 'rgba (200,100,100,0.5)', делает – QuepasaTio

+0

использовать заговорные полосы для цветного фона [jsfiddle] (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software /highcharts.com/tree/master/samples/highcharts/members/axis-addplotband/) –

+0

Этот ответ лучше подходит для ситуаций, когда вы хотите, чтобы определенные диапазоны или разделы диаграммы были окрашены в сравнении с запросом оригинального плаката на весь под землей под цветной. –

Смежные вопросы