Vueアプリでの複数のHighchartペインの背景色


8

VueアプリでHighchartsを使用しています。 highcharts-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;

私はハイチャートをもっとインポートしようとしました

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

しかし、機能しません。ページは白に戻ります。私はまた、Vueのindex.htmlに移動して追加してインポートしようとしました<script src="https://code.highcharts.com/highcharts-more.js"></script>

ページにエラーはありませんが、ペインにはまだ色がありません。

*これが不可能な場合は、少なくともペインの間に線を追加できますか?

ありがとう

編集

赤い領域は「ペイン」です。ありがとうここに画像の説明を入力してください


このようにデバッグするのは難しいです。役立つフィドルをコードで提供できる場合。
ジュネイド氏が発疹

私が取り組むことができるオンラインであなたのコードを再現してください。使用できるテンプレートは次のとおり
SebastianWędzel

@SebastianWędzelこれをチェックしてください。ペイン関連のコードを削除して「チャートの更新」を押すと、新しいデータが表示されます。codesandbox.io/s/vue-template-40b4z
codebot

このデモはうまく機能しないと思います。直してもらえますか?
SebastianWędzel

@SebastianWędzelこんにちは。これをチェックして、https://codesandbox.io/s/vue-template-m6fseを確認してください。[チャートの更新]ボタンをクリックすると、同じチャートに2つの異なるペインが作成されます。今、私はそれらの2つのペインになんとかして背景色を持たせたいと思います。ありがとう
codebot

回答:


3

chart.plotBackgroundColorプロパティを使用して、要件を達成できます。

デモ:https : //codesandbox.io/s/vue-template-pt9jp

また、グラフは動的にレンダリングされるため、アニメーションを無効にすることをお勧めします。

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

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


これは近いですが、私が望むものではありません。ペインを白にし、背景を黒のままにしたい。
codebot

わかりません-グラフの外観を説明する画像はありますか?
SebastianWędzel

元の質問を確認してください。画像をアップロードしました。赤い領域がペインです。これらのペインは、独自の色にする必要があります。
codebot

それで、あなたはこのようなことを達成したいですか?codesandbox.io/s/vue-template-umuhv
SebastianWędzel

はい。ただし、一方のペインがどこから始まり、もう一方が終了するかはわかりません。したがって、それらの間のスペースも黒にして、簡単に区別できるようにする必要があります。7.5と0の間のスペース
codebot

2

CSS ドキュメントページでスタイルを設定する必要があると思うので、ここにライブサンプルがあります

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

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

編集:回避策を見つけました このトピックの使用して、特定の範囲ペインの背景色を変更できます。

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

あなたのケースでは、最初と最後の値を設定する必要があります。


これは私が望むものに近いですが、ペインの色を変えたいので、チャートのペインだけのcssルールを表示できません。ありがとう
codebot

ペインの意味がわかりませんが、このプロパティはAPIリファレンス
Bernardo Marques

元の質問の写真を確認してください。赤い領域がペインです。ありがとう
codebot

pane:{ background:{ backgroundColor:"#000000" } }Inside the chart options jsonと同じオプションの「チャート」の内部を試しましたが、何もしませんでした...
codebot

0

それを行うハッキーな方法は、svgにrectを挿入することです。

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>';
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.