Question

由于highcharts没有柱形图，我可以在其中设置每列的高度和宽度，因此我必须使用面积图来完成此操作。所以基本上我使用面积图来绘制矩形。面积图的问题在于工具提示不是居中的，而是始终显示在矩形的一个边缘上方。另外，我正在绘制多个矩形在彼此之上，导致显示错误矩形的工具提示。

$('#container').highcharts({
    chart: {
      type: 'area',
      zoomType: 'x'
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        enabled: false
      }
    },
    plotOptions: {
      area: {
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: false
            }
          }
        },
        fillOpacity: 1
      }
    },
    tooltip: {
      enabled: true
    },
    series: [{
      name: 'Year',
      color: '#0d233a',
      data: [
        [Date.UTC(2017,  0, 1), 0],
        [Date.UTC(2017,  0, 1), 4],
        [Date.UTC(2017,  11, 31), 4],
        [Date.UTC(2017,  11, 31), 0]
      ],
      zIndex: 4,
      fillColor: '#0d233a',
      lineColor: '#fff'
    }, {
      name: 'Half year',
      id: 'Half',
      color: '#2f7ed8',
      data: [
        [Date.UTC(2017,  0, 1), 0],
        [Date.UTC(2017,  0, 1), 10],
        [Date.UTC(2017,  5, 31), 10],
        [Date.UTC(2017,  5, 31), 0]
      ],
      zIndex: 3,
      fillColor: '#2f7ed8',
      lineColor: '#fff'
    }, {
      name: 'Half year',
      linkedTo: 'Half',
      data: [
        [Date.UTC(2017,  6, 1), 0],
        [Date.UTC(2017,  6, 1), 6],
        [Date.UTC(2017,  11, 31), 6],
        [Date.UTC(2017,  11, 31), 0]
      ],
      zIndex: 3,
      fillColor: '#2f7ed8',
      lineColor: '#fff'
    }]
  });

有关示例，请参阅此fiddle。您可以看到工具提示未居中，并且在悬停深蓝色矩形时显示错误的工具提示。有谁知道如何解决这个问题？

Answer 1

如果一个系列中的所有列都具有相同的宽度，您可以尝试使用正常的柱形图，使用紧密排列的列和多个xAxis执行此操作：

...

xAxis: [{
    type: 'datetime',
}, {
    type: 'datetime',
}],

plotOptions: {
    column: {
        grouping: false,
        groupPadding: 0,
        pointPadding: 0,
        pointPlacement: 'between',
    },
},

series: [{
  name: 'Year',
  data: [
    [Date.UTC(2016,  0, 1), 3],
    [Date.UTC(2017,  0, 1), 4],
  ],
  zIndex: 4,
  color: '#222'
}, {
  name: 'Half year',
  xAxis: 1,
  data: [
    [Date.UTC(2016,  0, 1), 8],
    [Date.UTC(2016,  6, 1), 11],
    [Date.UTC(2017,  0, 1), 10],
    [Date.UTC(2017,  6, 1), 6],
  ],
  zIndex: 3,
  color: 'royalblue',
}],

http://jsfiddle.net/j1fnkt01/3/

注意：缩放将无法正常工作，直到x轴可以正确链接（linkedTo），并且this issue阻止我们立即执行此操作。

Answer 2

您可以使用tooltip.followPointer获得所需的结果

当工具提示跨越列，饼图切片和具有范围的其他点类型时，是否应该跟随鼠标。默认情况下，对于那些系列类型的plotOptions，它通过覆盖对散点图，气泡和饼图系列采用这种方式。

对于触摸移动的行为方式相同，followTouchMove也必须为true。

默认为false。

工具提示将是

tooltip: {
  enabled: true,
  followPointer: true
},

Fiddle演示

<强>更新

使用plotOptions.area.trackByArea正确显示工具提示

所以plotOptions将是

plotOptions: {
  area: {
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    fillOpacity: 1
  },
  series: {
    trackByArea: true,
    stickyTracking: false,
  }
},

updated fiddle

高图区域图表的中心工具提示

2 个答案: