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不支持滚动条。

如果我只是插入使用溢出：滚动图表的包裹div，这仍然会使我的标题居中在一个长div的中间，当我走到那个长的右侧时，y轴将被隐藏格。

有没有办法让ScrollBar与上面的东西挂在一个高图上（不是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
  }
};

我正在使用反应。我只是将选项传递给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>

水平滚动条为highcharts，而不是Highstock

1 个答案: