Question

基本上，这是一个庞大的基于Web服务的Web应用程序，可以显示数百个图形。我刚刚参与了这个项目，需要在这些动态生成的图形上实现图例。

我知道我的图片已加载，因为当我输入错误/随机路径时，我收到错误：

enter image description here

目前，来自CSS的文本显示但是图像无法输入到它的位置，因为它似乎只允许一组标记。我已经尝试将它作为img放在显示器中以及更改Z索引和位置但除了文本之外它只是没有显示任何内容。

enter image description here

以下是相关的CSS（我已尝试使用background代替backgroundImage btw）：

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);
}

Answer 1

更新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
好的，最新进展的是：
使用隐藏/显示功能将标准图例添加到图表中：

 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。

我希望这能解决一些问题。

原始回答：

我上周将所有公司图表更新为highcharts ..将此用作背景图片

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);

Highcharts中没有出现背景图像

1 个答案: