1

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

我知道我的图像已加载，因为当我输入错误/随机路径时出现错误：

在此处输入图像描述

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

在此处输入图像描述

这是相关的CSS（我已经尝试过使用background而不是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
好的，正在发生的事情是：
将标准图例添加到具有隐藏/显示功能的图表中：

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

注意：我将图表容器的宽度设置为 500 像素。

我希望这可以解决一些问题。

原始答案：

我上周刚刚将我们所有的公司图表更新为 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);

于 2012-11-09T16:10:05.427 回答