javascript - Vue应用程序中多个Highchart Pane 的背景颜色

我正在通过使用highcharts-vue在Vue应用程序中使用Highcharts

我像这样设置我的模板

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

然后在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: []
        }

然后，当我要添加数据时，我将数据相应地推送到yAxis，系列和背景数组

                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;

我尝试通过更多方式导入highcharts

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

但它不起作用，页面变回白色。我还尝试通过转到Vue的index.html并添加<script src="https://code.highcharts.com/highcharts-more.js"></script>来导入它

页面没有错误，但是 Pane 仍然没有颜色。

*如果无法做到这一点，我是否可以至少以某种方式在 Pane 之间添加一条线？

谢谢

编辑

红色区域是“ Pane ”。谢谢

最佳答案

您可以使用 chart.plotBackgroundColor 属性来满足您的要求。

演示:https://codesandbox.io/s/vue-template-pt9jp

并且由于您的图表是动态呈现的，因此我建议禁用动画:

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

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

关于javascript - Vue应用程序中多个Highchart Pane 的背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60451248/