高脚椅用不同的背景颜色填充图表内部

Question

我使用的是Highcharts，我需要用不同的颜色填充图表内部。

我试过了：

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

等...

但这只会改变整个图表的背景。

这是一个截图，显示我需要更改的内容。

我该怎么做？

这也是代码：

<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>

Answer 1

尝试将图表类型设置为“area”并指定fillColor：

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

演示：http://jsfiddle.net/remisture/dsuLzpqL/

Answer 2

系列的部分称为“区域”，您可以按照以下http://api.highcharts.com/highcharts/plotOptions.line.zones

对其进行着色

示例代码：

    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