gpt4 book ai didi

javascript - 背景图片未出现在 Highcharts 中

转载 作者:行者123 更新时间:2023-11-28 13:27:02 25 4
gpt4 key购买 nike

基本上,这是一个基于网络服务的大型网络应用程序,可以显示数百个图表。我刚刚参与该元素,需要在这些动态生成的图形上实现图形图例。

我知道我的图片已加载,因为当我输入不正确/随机的路径时,我收到错误消息:

enter image description here

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

enter image description here

这是相关的 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);
}

最佳答案

更新 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 网站上抓取并修改以适合我试图解释的内容的这个简单 fiddle :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);

关于javascript - 背景图片未出现在 Highcharts 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13311610/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com