更改 HighCharts 中成交量列(高/低)的颜色

2024-03-09

我有一个简单的图表,显示下面带有成交量柱的烛台:http://jsfiddle.net/T83Xy/ http://jsfiddle.net/T83Xy/

基本上,我想对柱子使用黑色和红色,具体取决于收盘价是否高于开盘价。我通过推送 Y: data, color: '#000000' 作为参数看到了一些示例。问题是我正在推送日期和卷号。我尝试推送 X: 日期、Y: 数据、颜色: '#000000' 但它抛出错误并且没有给我预期的结果。


首先,你需要设置系列.turboThreshold https://api.highcharts.com/highcharts/plotOptions.series.turboThreshold如果您有大量积分,则为 0。这将禁用输入数据格式检查。

然后,要根据蜡烛应用列颜色,我建议您使用这段代码:

Highcharts.seriesTypes.column.prototype.pointAttribs = (function(func) {
    return function(point, state) {
      var attribs = func.apply(this, arguments);
      
      var candleSeries = this.chart.series[0]; // Probably you'll need to change the index
      var candlePoint = candleSeries.points.filter(function(p) { return p.index == point.index; })[0];

      var color = (candlePoint.open < candlePoint.close) ? '#FF0000' : '#000000'; // Replace with your colors
      attribs.fill = state == 'hover' ? Highcharts.Color(color).brighten(0.3).get() : color;
      
      return attribs;
    };
}(Highcharts.seriesTypes.column.prototype.pointAttribs));

请小心,因为此代码将影响当前页面上的所有图表。但您可以轻松添加一些条件以仅在特定图表上运行此操作。Here https://jsfiddle.net/1Lxc4h3f/是带有上面代码的默认 Highstock 演示。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改 HighCharts 中成交量列(高/低)的颜色 的相关文章

  • Highcharts / Highstock 阶梯线没有垂直“过渡”线?

    是否可以省略 方波 线中的垂直线 我想你可以称之为水平线 这是一个例子 实现这种外观的最简单方法是使用带有自定义 线 符号的散点图 define a custom line symbol Highcharts SVGRenderer pro
  • Highcharts 系列更新动画

    我可以使用此方法更新蜘蛛图的数据值并查看其动画 chart series i setData newSeries i data 但是 由于蜘蛛图中的系列不仅包括data还有其他领域 例如 series name Allocated Budg
  • Highcharts xAxis 钻取未正确更改

    http jsfiddle net ZBXV7 2 http jsfiddle net ZBXV7 2 when I click a column or label the xAxis write incorrect label but t
  • 将附加数据添加到 Highcharts 上的饼图工具提示中

    我正在尝试使用 highcharts 将附加数据添加到我的饼图中 尝试解释一下 我有一个浏览器饼图 火狐 10 铬 12 探索者 65 歌剧 13 我想添加更多信息以在工具提示中显示 例如 火狐 10 其中女性用户 5 铬 12 其中女性用
  • 如何在 R 中设置 highchart 全局选项

    我在 javascript 中看到了很多示例 但我找不到在 R 中执行此操作的示例 这是 API 链接 http api highcharts com highcharts global http api highcharts com hi
  • 渲染图表后,从图表对象更改 Highcharts 工具提示格式化程序

    我发现我可以使用 setData 更改系列 并且我知道我可以使用 setExtremes 修改最大值 但我无法弄清楚如何从图表对象设置工具提示格式化程序 我如何更新该字段 如果我有一个图表对象 如何更新其工具提示格式化程序属性 以及plot
  • 将系列列表传递给 SetSeries

    我将 DotNet Highcharts 与 Visual Studio 2010 结合使用 我创建了一个系列数组 List
  • 如何使用 JavaScript 动态更改 Highcharts 中的数据点

    我正在尝试改变现有系列中的一个点 通过查看 API 我一直在尝试以下操作 chart series 0 data 0 y 43 chart redraw 我确信我错过了一些简单的东西 但我无法弄清楚 感谢您的帮助 您不能只设置该值 Char
  • 如何获取 Highcharts 中某个点的索引?

    我正在使用 Highcharts 的 具有不规则间隔的时间数据 图表 如您所知 当鼠标移动到线条点上时 格式化程序函数将运行并显示一些信息 我想知道鼠标在其上移动的点的索引 因此 如果鼠标移动到该线的第一个点上 工具提示将显示 1 第二个点
  • Highcharter 已弃用函数的输出与建议的不同

    我正在用 Josh Kunst 的出色作品制作一个时间序列情节highcharterR 中的库 使用此数据 gt dput t structure c 2 2 267822980 325286564 66697091 239352431 9
  • 如何缩放到高图中的特定点

    Highmaps highcharts 是一个 javascript jquery 适配器 可在浏览器等中呈现地图 我有一张突出显示单个国家 地区的地图 但是 世界 地图的比例如此之大 因此我想在将地图加载到相关国家 地区后进行放大 看看
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 具有 yaxis max 属性的 Highcharts 不会隐藏绘图带和标签

    我创建了两个 jsfiddle 来演示我的问题 第一个 jsfiddle 是我需要的 第二个 jsfiddle 是我遇到的问题 这个jsfiddle https jsfiddle net n5ua6krj 1 https jsfiddle
  • Highcharts SVG 辅助功能

    Highcharts 创建的 SVG 没有标题 没有有意义的 desc 也没有 ARIA 属性 或者至少我在 API 中找不到任何内容来设置这些属性 按照以下提示操作http www sitepoint com tips accessibl
  • 图例中标签的悬停样式

    如何设置图例中标签的悬停样式 如果可以设置的话cursor default在此示例中 将鼠标悬停在 东京 纽约 柏林 伦敦 标签上http www highcharts com demo http www highcharts com de
  • Highcharts,钻取时添加“返回”(向上钻取)按钮

    如何从此实现 http jsfiddle net highcharts Vf3yT 点击饼图 到此http jsfiddle net neFYY http jsfiddle net neFYY 新 3 0 Highcharts Highch
  • HighStocks 可拖动元素干扰 gridster 拖动

    我正在使用 HighStocks 和 gridster 的股票图表 gridster 中的每个单独的块都可以自由拖动 然而 股票时间滑块小工具也可以拖动和调整大小 由于它位于 gridster 小部件的顶部 因此每当我拖动滑块时 整个小部件
  • 条形图的 Highcharts 背景图像

    我想使用 Highcharts 将背景图像添加到条形图并将其显示在UIWebView 到目前为止 我一直在使用这个小插件 它在最新的 Chrome 中运行良好 但是 一旦我将其加载到 UIWebView 中 图像就不会显示 我认为这与iOS
  • HighCharts - 条形图中的 Y 轴填充

    我使用一种 y 轴标签样式 其中每个数字左对齐放置在其各自水平网格线的顶部 如下图所示 HighCharts 中唯一的复杂之处是轴标签有时会与柱形图中的第一列重叠 更新的演示 有关示例 请参见此图表 http jsfiddle net NW
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐