如何使用SVG设置highcharts子弹图的目标？
How to set the target of highcharts bullet chart using SVG?
我想实现如下子弹图：
但是 highcharts 文档没有写任何关于添加自定义 svg 或如何在目标标记顶部实现箭头和标签的内容。
任何提示或想法都会很有帮助。
感谢世界。
您可以使用任何 svg 图标并将其放置在 css 中，就像任何其他元素一样。我将向您展示我自己如何在我的项目中做到这一点。
请注意，在下面的代码中，我使用内联 svg 设置了 simbicon-arrow-dwn 样式，只是为了使 运行 此处的代码成为可能。但在现实生活中，您将图标放在 img 文件夹中，并通过 css class 上的 url 调用它，就像代码中注释的那样。
html, body {
width:100%;
background-color: #f2f2f2;
margin: 0 auto;
}
.navbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
width: 100vw;
top: 0%;
background: #faa;
padding:7px;
box-shadow:0px 0px 15px rgba(55,55,55,0.3);
border-bottom:1px solid rgba(143, 77, 77, 0.5);
}
.left {
grid-column: 1/2;
position: relative;
height: 100%;
left:10px;
}
.right {
grid-column: 3/4;
position: relative;
display: flex;
justify-content: end;
height: 100%;
right:10px;
}
.center
{
grid-column: 2/3;
position: relative;
color:#555;
font-weight:700;
text-align: center;
justify-content: center;
align-items: center;
font-size: 18px;
display: flex;
}
.content {
padding:10px;
position: relative;
}
.a
{
text-decoration:none;
}
.div
{
position: relative;
background: #d4d4d4;
border: 1px solid #555;
border-radius: 5px;
padding: 7px;
margin: 5px;
display: flex;
justify-content: space-around;
vertical-align:center;
}
.divbar
{
position: relative;
background: none;
padding: 0px;
margin: 5px;
display: flex;
vertical-align:center;
}
.bar-in
{
position: absolute;
background: #007aff;
border-radius: 4.5px;
padding: 6px;
margin: -40.6px 0px 0px 5.5px;
height:23.1px;
display: flex;
justify-content: space-around;
vertical-align:center;
width:50%;
}
.bullet
{
position: absolute;
background: #007aff;
padding: 0px;
margin: 26.5px 0px 0px 275px;
width:7px;
height:35px;
vertical-align:center;
z-index:10;
}
.arrow
{
position: relative;
z-index:15;
left:246px;
}
.bar-text
{
z-index:20;
color:#ff0;
}
.icon
{
position: absolute;
left: 100%;
margin: 0px 10px 0px 10px;
top: -2px;
padding: 1px 5px;
}
i.icon {
display:inline-block;
vertical-align:middle;
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
position:relative
}
.simbicon-arrow-dwn {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:36px;
height:36px
}
.simbicon-arrow-dwn-small {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:16px;
height:16px;
}
<!DOCTYPE html>
<html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
</head>
<body>
<div class="navbar">
<div class="left">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
<div class="center">Title</div>
<div class="right">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
</div>
<div class="content">
<a href="#">
<div class="div">Here is a svg icon
<i class="icon simbicon-arrow-dwn" style="left:10%;"></i>
</div>
</a>
<a href="#">
<div class="div">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
Here is another svg icon
</div>
</a>
<a href="#">
<div class="div">Yet another
<i class="icon simbicon-arrow-dwn" style="left:10px;"></i>
svg icon
</div>
</a>
<br/><br/><br/>
<div class="divbar">
<div class="arrow"><i class="icon simbicon-arrow-dwn-small" style="left:10px;"></i></div>
<div class="bullet"></div>
</div>
<div class="div"><b class="bar-text" >This is the bar</b>
</div>
<div class="bar-in">
</div>
</div>
</body>
</html>
现在您可以看到最后一个柱子与您在问题中显示的一样。
如果您说 .bar-in 栏（此处为蓝色）将动态更改，并且 .bullet 会更改它的位置相应地，它将被一个脚本改变。因此，如果您使该脚本动态更改 left:246px 值 .arrow 以按比例更改 .bar-in 变化和 **margin: 26.5px 0px 0px 275px; (275px (margin-left)) of .bullet 也改变然后 .arrow 将始终跟随 .bullet 到它沿栏的任何位置。
这是我在应用程序中使用的 js 文件的屏幕截图。如您所见，javascript 正在处理一块 html 和 css 只是为了控制如何和此元素在应用程序中显示的位置。如果您设法在您的脚本中创建这样的实现，或者如果您使用第三方代码找到它处理子弹和目标标记的位置，那么您可以轻松地将默认图像替换为您的图像之一选择。或者甚至在给定的情况下创建它脚本只是使用彩色 div 就像我为蓝色 .bar-in 和 .bullet[ 所做的一样=53=].
截图：
这里是同一个 js 正在处理我更改的 svg，因为之前它是 png。
我想实现如下子弹图：
但是 highcharts 文档没有写任何关于添加自定义 svg 或如何在目标标记顶部实现箭头和标签的内容。 任何提示或想法都会很有帮助。
感谢世界。
您可以使用任何 svg 图标并将其放置在 css 中，就像任何其他元素一样。我将向您展示我自己如何在我的项目中做到这一点。
请注意，在下面的代码中，我使用内联 svg 设置了 simbicon-arrow-dwn 样式，只是为了使 运行 此处的代码成为可能。但在现实生活中，您将图标放在 img 文件夹中，并通过 css class 上的 url 调用它，就像代码中注释的那样。
html, body {
width:100%;
background-color: #f2f2f2;
margin: 0 auto;
}
.navbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
width: 100vw;
top: 0%;
background: #faa;
padding:7px;
box-shadow:0px 0px 15px rgba(55,55,55,0.3);
border-bottom:1px solid rgba(143, 77, 77, 0.5);
}
.left {
grid-column: 1/2;
position: relative;
height: 100%;
left:10px;
}
.right {
grid-column: 3/4;
position: relative;
display: flex;
justify-content: end;
height: 100%;
right:10px;
}
.center
{
grid-column: 2/3;
position: relative;
color:#555;
font-weight:700;
text-align: center;
justify-content: center;
align-items: center;
font-size: 18px;
display: flex;
}
.content {
padding:10px;
position: relative;
}
.a
{
text-decoration:none;
}
.div
{
position: relative;
background: #d4d4d4;
border: 1px solid #555;
border-radius: 5px;
padding: 7px;
margin: 5px;
display: flex;
justify-content: space-around;
vertical-align:center;
}
.divbar
{
position: relative;
background: none;
padding: 0px;
margin: 5px;
display: flex;
vertical-align:center;
}
.bar-in
{
position: absolute;
background: #007aff;
border-radius: 4.5px;
padding: 6px;
margin: -40.6px 0px 0px 5.5px;
height:23.1px;
display: flex;
justify-content: space-around;
vertical-align:center;
width:50%;
}
.bullet
{
position: absolute;
background: #007aff;
padding: 0px;
margin: 26.5px 0px 0px 275px;
width:7px;
height:35px;
vertical-align:center;
z-index:10;
}
.arrow
{
position: relative;
z-index:15;
left:246px;
}
.bar-text
{
z-index:20;
color:#ff0;
}
.icon
{
position: absolute;
left: 100%;
margin: 0px 10px 0px 10px;
top: -2px;
padding: 1px 5px;
}
i.icon {
display:inline-block;
vertical-align:middle;
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
position:relative
}
.simbicon-arrow-dwn {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:36px;
height:36px
}
.simbicon-arrow-dwn-small {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:16px;
height:16px;
}
<!DOCTYPE html>
<html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
</head>
<body>
<div class="navbar">
<div class="left">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
<div class="center">Title</div>
<div class="right">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
</div>
<div class="content">
<a href="#">
<div class="div">Here is a svg icon
<i class="icon simbicon-arrow-dwn" style="left:10%;"></i>
</div>
</a>
<a href="#">
<div class="div">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
Here is another svg icon
</div>
</a>
<a href="#">
<div class="div">Yet another
<i class="icon simbicon-arrow-dwn" style="left:10px;"></i>
svg icon
</div>
</a>
<br/><br/><br/>
<div class="divbar">
<div class="arrow"><i class="icon simbicon-arrow-dwn-small" style="left:10px;"></i></div>
<div class="bullet"></div>
</div>
<div class="div"><b class="bar-text" >This is the bar</b>
</div>
<div class="bar-in">
</div>
</div>
</body>
</html>
现在您可以看到最后一个柱子与您在问题中显示的一样。
如果您说 .bar-in 栏（此处为蓝色）将动态更改，并且 .bullet 会更改它的位置相应地，它将被一个脚本改变。因此，如果您使该脚本动态更改 left:246px 值 .arrow 以按比例更改 .bar-in 变化和 **margin: 26.5px 0px 0px 275px; (275px (margin-left)) of .bullet 也改变然后 .arrow 将始终跟随 .bullet 到它沿栏的任何位置。
这是我在应用程序中使用的 js 文件的屏幕截图。如您所见，javascript 正在处理一块 html 和 css 只是为了控制如何和此元素在应用程序中显示的位置。如果您设法在您的脚本中创建这样的实现，或者如果您使用第三方代码找到它处理子弹和目标标记的位置，那么您可以轻松地将默认图像替换为您的图像之一选择。或者甚至在给定的情况下创建它脚本只是使用彩色 div 就像我为蓝色 .bar-in 和 .bullet[ 所做的一样=53=].
截图：
这里是同一个 js 正在处理我更改的 svg，因为之前它是 png。