Màu nền cho nhiều tấm Highchart, trong ứng dụng Vue

Tôi đang sử dụng Highcharts trong ứng dụng Vue bằng cách sử dụng highcharts-vue

Tôi đang thiết lập mẫu của tôi như vậy

<highcharts class="vessChart" ref="chart" style="width:100%"  :callback="chartcallback" :options="options"    ></highcharts>  

và sau đó tôi đặt các tùy chọn của biểu đồ trong Vue

            yAxis:[],
        series:[],     
        background:[],
        options: {              
          chart: {
            borderWidth: 1,
            marginLeft: 40,
            marginRight: 2,
            type:'line',
            zoomType: 'x',
            title: {
                text: ''
            },
            panning:true
            /*backgroundColor:'lightgrey'*/
          },
          title: {
            text: ''
          },
          pane:{
            background:[]
          },
          time:{
            useUTC:true
          },  
          credits:{
            enabled:false
          },
          tooltip: {
            shared: true
          },
          title:{
            text:null
          },
          rangeSelector: {
            inputEnabled: false
          },
          xAxis:{
            type:'datetime',
            title:
            {
              align:'high'
            }, 
            labels: {
              padding: 50,
              format: '{value:%e %b %Y}',
              style: {
                fontSize: '10px'
              }
            },
            crosshair: {
                enabled: true,
                width: 2,
                color: '#000'
            },
          },
          yAxis: [],   
          plotOptions: {
            series: {
              animation: false
            }
          },
          ,series: []
        }

và sau đó, khi tôi có dữ liệu để thêm, tôi đẩy dữ liệu sang mảng yAxis, chuỗi và nền tương ứng

                this.data.titles.forEach(title => {
              this.yAxis.push(
                  {
                    title: {
                      text: title.title,
                      margin:20,
                      fontSize:"15px"
                    },
                    labels: {
                      enabled:true,
                      align: 'left',
                      padding:15
                    },
                    alignTicks:'left', 
                    textAlign:'left',
                    align:'middle',
                    height: chartHeight+'%',
                    top:topStep+'%',
                    opposite:false, 
                    offset:0
                  }
              );
              this.background.push({backgroundColor: "red"});
              topStep = topStep + chartHeight + 5; 
              this.series.push({
                    yAxis:counter,
                    name:title.title,
                    data:[]
              });
              counter++;
            });//foreach 
            this.options.yAxis = this.yAxis;
            this.options.series = this.series;
            this.options.pane = this.background;

Tôi đã cố gắng nhập highcharts-more bằng cách làm

    import highchartsmore from './highcharts-more.js'     

nhưng nó không hoạt động, trang trở lại màu trắng. Tôi cũng đã cố gắng nhập nó bằng cách truy cập index.html của Vue và thêm<script src="https://code.highcharts.com/highcharts-more.js"></script>

Không có lỗi trong trang, nhưng các tấm vẫn không có màu.

* Nếu điều này là không thể, ít nhất tôi có thể thêm một đường giữa các tấm bằng cách nào đó không?

Cảm ơn

BIÊN TẬP

Các khu vực màu đỏ là "panes". Cảm ơn

Bạn có thể sử dụng thuộc tính chart.plotBackgroundColor để đạt được yêu cầu của bạn.

Bản trình diễn: https://codesandbox.io/s/vue-template-pt9jp

Và vì biểu đồ của bạn được hiển thị linh hoạt, tôi khuyến khích tắt hình ảnh động:

chart: {
  type: "spline",
  title: "Hassaan",
  animation: false
},

API: https://api.highcharts.com/highcharts/chart.plotBackgroundColor

Đối với những gì tôi thấy bạn sẽ cần tạo kiểu bằng trang css Docs , có một ví dụ trực tiếp ở đây

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-plot-background {
	fill: #efffff;
}
.highcharts-plot-border {
	stroke-width: 2px;
	stroke: #7cb5ec;
}

Chỉnh sửa: Tôi tìm thấy một workaorund trên này chủ đề, bạn có thể thay đổi màu nền cho một cửa sổ phạm vi cụ thể sử dụng plotBands:

e.g. yAxis : {[ ... plotBands : {color : '#f7d724', from : -50, to : 50}, ... ]}

Trong trường hợp của bạn, bạn nên đặt các giá trị cho cái đầu tiên và cuối cùng.

Một cách hackish để làm điều đó sẽ là tiêm trực tiếp vào svg.

document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="40" height="150" fill="#ff0000"></rect>';
document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="200" height="150" fill="#ff0000"></rect>';