Cor do plano de fundo para vários painéis Highchart, no aplicativo Vue

8

Estou usando Highcharts em um aplicativo Vue usando highcharts-vue

Estou definindo meu modelo assim

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

e depois defino as opções do gráfico no 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: []
        }

e, quando tenho dados a serem adicionados, envio os dados para yAxis, séries e matrizes de segundo plano de acordo

                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;

Tentei importar mais, fazendo mais

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

mas não funciona, a página volta a branco. Também tentei importá-lo, indo para index.html do Vue e adicionando<script src="https://code.highcharts.com/highcharts-more.js"></script>

Não há erro na página, mas os painéis ainda não têm cor.

* Se isso não for possível, posso pelo menos adicionar uma linha entre os painéis de alguma forma?

obrigado

EDITAR

As áreas vermelhas são os "painéis". obrigadoinsira a descrição da imagem aqui

codebot
fonte
É difícil depurá-lo assim. Se você puder fornecer um violão com seu código, isso seria útil.
junaid rasheed 28/02
Reproduza seu código no site em que eu poderia trabalhar. Aqui está um modelo que você pode usar: codesandbox.io/s/nw750l07nj
Sebastian Wędzel 28/02
@ SebastianWędzel Verifique isso. Se você remover o código relacionado ao painel e pressionar "Atualizar gráfico", deverá trazer novos dados. codesandbox.io/s/vue-template-40b4z
codebot 28/02
Receio que esta demonstração não funcione bem. Você poderia consertar isso?
Sebastian Wędzel
@ SebastianWędzel Olá novamente. Verifique isso https://codesandbox.io/s/vue-template-m6fse agora ele funciona. Quando você pressiona o botão Atualizar gráfico, ele cria 2 painéis diferentes no mesmo gráfico. Agora, quero que esses dois painéis tenham uma cor de fundo de alguma forma. Obrigado
codebot 03/03

Respostas:

3

Você pode usar a propriedade chart.plotBackgroundColor para atingir seus requisitos.

Demonstração: https://codesandbox.io/s/vue-template-pt9jp

E como seu gráfico é renderizado dinamicamente, incentivo a desativar a animação:

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

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

Sebastian Wędzel
fonte
Tão perto, mas não o que eu quero. Quero que os painéis sejam brancos e o fundo ainda preto.
codebot 9/03
Eu não entendo - você tem uma imagem que descreva a aparência do gráfico?
Sebastian Wędzel
Verifique minha pergunta original, enviei uma imagem, as áreas vermelhas são os painéis. Esses painéis devem ter uma cor diferente por conta própria.
codebot 9/03
Então, você gostaria de conseguir algo assim? codesandbox.io/s/vue-template-umuhv
Sebastian Wędzel 10/03
Sim, mas você não pode ver onde um painel é iniciado e o outro termina. Portanto, o espaço entre eles também deve ser preto, para que você possa diferenciá-los facilmente. O espaço entre 7,5 e 0
codebot 10/03
2

Pelo que vejo, você precisará estilizar pela página de documentos do CSS , há um exemplo ao vivo aqui

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

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

Edit: Eu encontrei um workaorund sobre este tópico, você pode alterar a cor do plano de fundo para um painel de intervalo específico usando plotBands:

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

No seu caso, você deve definir os valores para o primeiro e o último.

Bernardo Marques
fonte
Isso está mais próximo do que eu quero, mas quero que o painel tenha uma cor diferente e não consiga ver nenhuma regra de css apenas para os painéis do gráfico. Obrigado
codebot 09/03
Não sei ao certo o que você quer dizer com painel, mas encontrei essa propriedade na Referência da API
Bernardo Marques
Verifique a foto na minha pergunta original, as áreas vermelhas são os painéis. Obrigado
codebot 9/03
Eu tentei pane:{ background:{ backgroundColor:"#000000" } }Dentro das opções de gráfico json e dentro do "gráfico" das mesmas opções e não fez nada ....
codebot 09/03
0

Uma maneira imprudente de fazer isso seria injetar um rect no 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>';
Gato
fonte