谢谢你的预付款.

我试图在X轴上应用十字准线,但它在每一列上都显示了非常细的灰色背景线.我想在X轴上按组显示十字准线.在柱状图和条形图中需要此行为.

准备了jsfiddle个.

使用普通柱状图jsfiddle

    Highcharts.chart('container', {
  chart: {
    type: "column",
  },
  legend: {
    enabled: false
  },
  xAxis: {
    labels: {
      format: "{value:%b %e}"
    },
    tickInterval: 604800000,
    type: "datetime",
    min: 1569888000000, // 2019-10-01T00.00.00.000Z
    tickPositioner: function() {
      this.tickPositions[0] = 1569888000000; // 2019-10-01T00.00.00.000Z
      return this.tickPositions;
    },
    crosshair: true
  },
  series: [{
    data: [{
      x: 1569888000000, // 2019-10-01T00.00.00.000Z
      y: 952,
    }, {
      x: 1570492800000,
      y: 1082,
    }, {
      x: 1571097600000,
      y: 856,
    }, {
      x: 1571702400000,
      y: 1264,
    }, {
      x: 1572307200000,
      y: 1004,
    }, {
      x: 1572912000000,
      y: 1121,
    }],
  }]
});

所以要显示灰色背景,完全覆盖一栏.

In below images, you can see I got yellow highlighted gray shadow with thin line, but I need result like in next images. So there is only changes in structure I am using column time series chart in that case gray shadow not showing properly. For other column charts gray shadow display properly. enter image description here enter image description here

推荐答案

datetime轴类型的情况下,必须覆盖HighChats函数以实现这一点:

(function(H) {
  H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed, e, point) {
    proceed.apply(this, e, point);

    if (this.isXAxis) {
      const points = this.series[0].points,
        length = points[1].plotX - points[0].plotX;

      if (this.dateTime) {
        this.cross.attr({
          stroke: H.Color.parse("#ccd3ff").setOpacity(0.25).get(),
          'stroke-width': length
        });
      }     
    }
  });
}(Highcharts));

Demo:. https://jsfiddle.net/BlackLabel/Lj3kgen0/.

Reference:. https://www.highcharts.com/forum/viewtopic.php?f=9&t=50829.

Typescript相关问答推荐

类型脚本不会推断键的值类型

Angular 过滤器形式基于某些条件的数组控制

当类型断言函数返回假时,TypScript正在推断从不类型

对于使用另一个对象键和值类型的对象使用TS Generics

如何创建泛型类型组件来使用React Native的FlatList或SectionList?'

如何表示多层深度的泛型类型数组?

打字类型保护递归判断

React Typescript项目问题有Redux-Toolkit userSlice角色问题

react 路由Use RouteLoaderData类型脚本错误

如何使用模板继承从子组件填充基础组件的画布

如何合并两个泛型对象并获得完整的类型安全结果?

有没有一种方法可以确保类型的成员实际存在于TypeScript中的对象中?

回调函数中的TypeScrip类型保护返回Incorect类型保护(具有其他未定义类型的返回保护类型)

map 未显示控制台未显示任何错误@reaction-google-map/api

字幕子集一个元组的多个元素

类型判断数组或对象的isEmpty

使用&reaction测试库&如何使用提供程序包装我的所有测试组件

当受其他参数限制时,通用参数类型不会缩小

如何强制对象数组中的对象属性具有非空字符串值?

Typescript 编译错误:TS2339:类型string上不存在属性props