当前位置:  开发笔记 > 编程语言 > 正文

高图-具有目标线的柱形图/条形图

如何解决《高图-具有目标线的柱形图/条形图》经验,为你挑选了1个好方法。

使用highcharts,在柱形图或条形图上实现目标线的最佳方法是什么?(也称为目标与目标)

以类似的d3.js线程为例找到此图片:

我正在考虑其他系列,但是在文档中没有关于目标行的任何选项。这是基本的柱形图:jsfiddle.net/eksh8a8p/

我已经考虑过使用columnrange系列,但是您只能使用一个开始/结束值,这可能会由于数字值的缩放而出现问题。

还有其他想法/选项可以产生与上图类似的结果吗?



1> morganfree..:

您可以使用columnrange系列,但有一个更简单的选项-带有矩形标记的散布系列

    //custom marker
    Highcharts.SVGRenderer.prototype.symbols['c-rect'] = function (x, y, w, h) {
       return ['M', x, y + h / 2, 'L', x + w, y + h / 2];
    };

    //series options
    {
      marker: {
        symbol: 'c-rect',
        lineWidth:3,
        lineColor: Highcharts.getOptions().colors[1],
        radius: 10
      },
      type: 'scatter'

示例:http://jsfiddle.net/eksh8a8p/1/

推荐阅读
保佑欣疼你的芯疼
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有