1

基本的に、これは何百ものグラフを表示できる巨大なWebサービスベースのWebアプリケーションです。プロジェクトに参加したばかりで、動的に生成されたこれらのグラフにグラフの凡例を実装する必要があります。

間違った/ランダムなパスを入力するとエラーが発生するため、画像が読み込まれていることがわかります。

ここに画像の説明を入力してください

現在、CSSからのテキストは表示されますが、タグのセットが1つしか許可されていないように見えるため、その場所に画像を入力することはできません。すでにディスプレイにimgとして配置し、Zインデックスと位置を変更しようとしましたが、テキスト以外は何も表示されません。

ここに画像の説明を入力してください

関連するCSSは次のとおりです（btwbackgroundの代わりに使用してみました）。backgroundImage

credits: {
    enabled: true,
    text: 'Highcharts.com',
    href: 'http://www.highcharts.com',
    position: {
        align: 'right',
        x: -10,
        verticalAlign: 'bottom',
        y: -5
    },
    style: {
        cursor: 'pointer',
        color: '#909090',
        fontSize: '10px',
        backgroundImage: 'url("/image/example")'
    }   
}

および関連する可能性のあるJavaScript：

if (credits.enabled && !chart.credits) {
        creditsHref = credits.href;
    chart.credits = renderer.text(
        credits.text,
        0,
    0
    )
    .on('click', function () {
        if (creditsHref) {
            location.href = creditsHref;
        }
    })
    .attr({
        align: credits.position.align,
        zIndex: 8
    })
    .css(credits.style)
    .add()
    .align(credits.position);
}
4

1 に答える 1

2

更新2：

まず、状況に合わせて数値を変更する必要があります（幅、高さ、x、yなど）。グラフの種類も変更したようです。スプラインチャートにリセットするには、次を使用します。

   chart: {
       renderTo: 'your-container-id', // chart div id
       type: 'spline', // your chart type
....

次に、幅を設定するか、必要なサイズに設定して、ブラウザのサイズ変更時にグラフのサイズが変更されないようにする<div id="your-container-id" style="width:1000px;"></div>必要があります。

次に、右マージンを設定して、右側に負のスペースがあることを確認する必要があります。

chart: {
 renderTo: 'your-container-id', // chart div id
 type: 'spline', // your chart type
 margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed
....

最後に、グラフの右側に画像をレンダリングします。

chart: {
 renderTo: 'your-container-id', // chart div id
 type: 'spline', // your chart type
 margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed
 events: {
   load: function() {
     this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 900, 105, 100, 100).add(); // x=900px to move image off chart (approx div width minus right margin) adjust as needed
       }
     }   
....

チャートのサイズ変更が必要な場合は、サイズ変更時にグラフィックを再配置する関数を作成する必要があります。しかし、それは別の章です。

私がまだ間違った球場にいる場合は、望ましい結果について詳しく説明してください。

更新1：

グラフのクレジットセクションに背景を追加することはできません。会社名とリンクでタグ付けしない限り、通常は無効にします。必要なのは凡例機能を使用することです。それが必要でない場合は、マージンの広いカスタム画像を使用してください。

私がhighchartsサイトから引っ掛けて、説明しようとしていたものに合うように変更したこの単純なフィドルをチェックしてください：jsFiddle Link
OK、何が起こっているのか：
非表示/表示機能を備えたチャートに標準の凡例を追加します：

 legend: {
  layout: 'vertical', // stacked legend. can also be horizontal and moved to bottom for a clean linear legend
  backgroundColor: '#FFFFFF',
  align: 'left',
  verticalAlign: 'top',
  x: 380, // move to right side of chart
  y: 200, // drop down 200px
  floating: true, // enabled for positioning
  shadow: true
 },

背景画像を右端まで追加します。

 chart: {
   renderTo: 'container',
   type: 'column',
   margin: [ 50, 150, 100, 80 ], // wide right margin to allow image outside chart
   events: {
     load: function() {
        this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 400, 105, 100, 100).add(); // x=400px to move image off chart
   }
 }   
}

注：チャートコンテナの幅を500pxに設定しました。

これでいくつかのことが明らかになることを願っています。

元の回答：

先週、すべての会社のチャートをハイチャートに更新しました。これを背景画像に使用してください

chart: {
            renderTo: 'container',   // where does the chart go?
            type: 'column',   // what kind of chart is it?
            margin: [ 50, 50, 100, 80 ],   // margins between outer edge and plot area
            events: {
                load: function() {
                    this.renderer.image('http://www.domain.com/images/logo.jpg', 150, 105, 545, 141).add();  // add image(url, x, y, w, h)
                }
            }
        },

画像パラメータは次のとおりです。image(url, x, y, width, height);

于 2012-11-09T16:10:05.427 に答える