时间戳

首页 > 解决方案 > 如何在 react-highstock 中绘制折线图和柱形图？

reactjs - 如何在 react-highstock 中绘制折线图和柱形图？

问题描述

我正在尝试使用 react 在 highstock 的不同 y 轴上绘制折线图和柱形图。但是，折线图隐藏在柱形图后面。我可以在柱形图上显示折线图，如他们的示例双图表 - https://www.highcharts.com/demo/combo-dual-axes所示？

我添加了一个指向我的图表的链接以澄清我的问题。

const chart_options= {
  chart: {
    zoomType: 'x'
  },
  title: {
    text: ""
  },
  tooltip:{
    split: false,
    shared:true,
    valueDecimals: 2
  },
  legend: {
    enabled: true,
    layout: 'horizontal' 
},
  series: [
    {
      name: 'ABC',
      type: 'line',
      data: this.props.data1,
      yAxis:1,
      color:'grey',
      lineWidth: 3
    },
    {
      name: 'DEF',
      type: 'line',
      data: this.props.data2,
      yAxis:0,
    },
    {
      name: 'GHI',
      type: 'column',
      data: this.props.data3,
      yAxis:0,
      color: '#ffd699',
      dataGrouping:{
        enabled: false
    },
    pointWidth: 1
    },
  ],
  xAxis: {
    type: 'datetime',
    gridLineWidth:1,
    title: {
      text: 'Time'
    },
    tickPixelInterval: 5
  },
  yAxis:  [
    {
    labels: {
      format: '{value:.0f}%',
    },
    opposite: false,
    tickPixelInterval: 20
  },
  {
    title: {
    labels: {
      format: '{value:.2f}',
    },
    tickPixelInterval: 20
  },
],
}

有人可以帮忙吗？

谢谢。

标签： reactjshighchartsreact-highcharts

解决方案

您可以zIndex为系列设置属性：

series: [{
  zIndex: 1,
  ...
}, {
  zIndex: 0,
  ...
}]

现场演示： https ://jsfiddle.net/BlackLabel/x5aefpLv/

API 参考： https ://api.highcharts.com/highstock/series.column.zIndex

推荐阅读