Vue.js 兼容 JS 图表，用于指示高低范围之间的值答案

【问题标题】：Vue.js compatible JS chart for indicating value between a high-low rangeVue.js 兼容 JS 图表，用于指示高低范围之间的值
【发布时间】：2020-12-05 07:23:17
【问题描述】：

我想要一个指示上限和下限之间的值的 javascript 图表。现实世界的用法是指示股票在 52 周高低范围之间的当前价格。它还需要与 Vue.js 兼容。我附上了下面的图片作为示例：

【问题讨论】：

标签： javascript reactjs vue.js charts highcharts

【解决方案1】：

从 Highcharts 网站 - 您可以只渲染 colorAxis，隐藏图表的其余部分并以编程方式触发悬停状态以在 colorAxis 上显示指示器。

演示：https://jsfiddle.net/BlackLabel/60a4rux7/

API：https://api.highcharts.com/highcharts/chart.events.load

【讨论】：

谢谢！正是我需要的！反正有没有指示指针上方的值？

【解决方案2】：

使用 CSS 很容易做到！

你只需要输入你想要的垂直线的百分比：

<div class="gradient">
  <div class="percentage" style="margin-left:20%" />
</div>

.gradient {
  height: 100px;
  background-color: red;
  background-image: linear-gradient(to right, green 25%, red 75%);
}

.percentage {
    width: 1px;
    height: 100%;
    background-color: black;
  }

看我的小提琴：https://jsfiddle.net/nLrebz7s/

【讨论】：

这是一个非常好的方法，谢谢！我想知道您是否还可以帮助在顶部添加那个小箭头和数字（左，右和箭头上方的一个？