javascript - highcharts 的水平滚动条，不是 Highstock

Question

我想在 highcharts 中实现滚动条，而不是 highstock，因为它会为我的公司花费额外的钱(仅用于滚动条，没有意义)。我已经尝试过了，但显然对我没有帮助:

How to enable highcharts x and y axis scrollbars? .

这里有一些例子:

http://jsfiddle.net/fj6d2/3076/
https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/

但是对于 highstock，我想对 Highchart 做同样的事情。

据我所知，Highcharts 不支持滚动条。如果我只是插入使用 overflow: scroll在图表的包裹 div 上，这仍然会使我的标题中心位于长 div 的中间，并且当我走到那个长 div 的右侧时，y 轴也将被隐藏。

有什么办法可以让 ScrollBar 和上面的东西放在 highchart (NOT HIGHSTOCK) 上？

这是我的选择

let options = {
  legend: {
    itemStyle: {
      fontWeight: 'bold',
      fontSize: '13px'
    },
    // width: 780,
    itemWidth: 130,
    floating: false
  },
  xAxis: {
    position: {align: 'left'},
    text: null,
    }, // ,
    // tickLength: 0
    type: 'category',
    categories: categories,
    min: 0// ,
    // max: 10
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: true,
    showFull: false,
    barBackgroundColor: 'rgb(44,89,142)',
    barBorderRadius: 0,
    barBorderWidth: 0,
    buttonBackgroundColor: 'rgb(44,89,142)',
    buttonBorderWidth: 0,
    buttonArrowColor: 'white'
  },
  yAxis: {
    // minorTickInterval: 'auto',
    title: {
      /* style: {
        textTransform: 'uppercase'
      }*/
    }, // ,
    min: 0,
    // max: 20,
  },
  // General
  background: '#FFFFFF',
  chart: {
    height: 500,
    width: 3900,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'column',
    backgroundColor: '#FFFFFF',
    style: {
      fontFamily: 'Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, 
sans-serif'
    },
    borderColor: '#ACB2BC',
    borderWidth: 1,
    events: { load: function fn() { console.log(this); /* this.width(800); 
*/ } } // #container
  },

  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    },
    candlestick: {
      lineColor: '#404048'
    },
    pie: {
      dataLabels: {
        enabled: true,
        distance: -50,
        style: {
          fontWeight: 'bold',
          color: 'white'
        }
      },
      allowPointSelect: true,
      cursor: 'pointer',
      data: values,
      showInLegend: true
    }
  },
  series: [{
    name: 'reports',
    data: values
  }],
  credits: {
    enabled: false
  }
};

我正在使用 react 。我只是将选项传递给 Highcharts。

 this.chart = new Highcharts['Chart'](
  this.refs.chart,
  this.props.options);

Answer 1

chart.scrollablePlotArea从 Highcharts v7.1.2 开始，scrollable plot area可以为水平或垂直滚动​​定义，具体取决于是否设置了 minWidth 或 minHeight 选项。这是 不是 需要使用 Highcharts Stock(又名 Highstock)。
API 引用中的演示是 here及以下:

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        scrollablePlotArea: {
            minWidth: 700,
            scrollPositionX: 1
        }
    },
    title: {
        text: 'Scrollable plot area'
    },
    subtitle: {
        text: 'Open on mobile and scroll sideways'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        tickWidth: 1,
        title: {
            text: 'Wind speed (m/s)'
        },
        lineWidth: 1,
        opposite: true
    },
    tooltip: {
        valueSuffix: ' m/s',
        split: true
    },

    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
        }
    },
    series: [{
        name: 'Hestavollane',
        data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6,
            5.5, 6.2, 5.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1,
            5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7,
            9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]

    }, {
        name: 'Vik',
        data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2,
            0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2,
            0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2,
            0.7, 1.3, 0.4, 0.3]
    }]
});

#container {
    max-width: 800px;
    min-width: 320px;
    height: 400px;
    width: 400px;
}

<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>