javascript - 如何在高图表中滑动

Question

我想在 Highcharts 视图中滑动，现在我只是从“rangeSelector”滑动。这是我的代码，请帮助我。不知道怎么设置配置----------------- 数据太多了，但是我觉得数据没问题，我觉得问题是我的配置~~ ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

this.Highcharts = Highcharts.stockChart(`${this.wrapId}`, 
      {
        chart: {
          //   zoomType: "x"
          plotBackgroundColor: "rgb(255, 255, 255)",
          backgroundColor: "rgb(255, 255, 255)",
          events: {
            redraw: function() {
              let series = this.series[0];
            },
            render: function() {}
          }
        },
        title: {
          text: ""
        },
        subtitle: {},
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            second: '%m/%d %H:%M',
            minute: '%m/%d %H:%M',
            hour: '%m/%d %H:%M',
            day: '%m-%d',
            week: '%m-%d',
            month: '%Y-%m',
            year: '%Y'
          },
          //   tickInterval: 60 * 1000, // 刻度线 1分种
          lineColor: "rgb(230, 230, 230)",
          lineWidth: 2,
          gridLineWidth: 1,
          gridZIndex: 1,
          tickPosition: "outside", // 刻度
          tickColor: "transparent", // 刻度颜色
          gridLineColor: "transparent",
          range:3600000,
        },
        credits: {
          enabled: false
        },
        rangeSelector: {
          enabled: false
        },
        navigator: {
          // 下导航
          enabled: true
        },
        scrollbar: {
          enabled: true
        },
        // 数据提示框
        tooltip: {
          enabled: true,
          backgroundColor: "white",
          borderColor: "white",
          style: {
            color: "black",
            zIndex:5,
          }
        },
        yAxis: [
          {
            top: "0%",
            height: "50%",
            title: {
              text: ""
            },
            endOnTick: true, // 强制结束于Y轴
            // markers:false,
            crosshair: true, // 横轴
            dashStyle: "shortdot",
            crosshair: {
              width: 1.5,
              color: "white",
              dashStyle: "dash"
            },
            plotLines: [
              {
                width: 2,
                color: "rgb(239, 197, 114)",
                value: this.startValue,
                dashStyle: "Dash",
                label: {
                  text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
                    this.startValue
                  }</span>`,
                  align: "right",
                  useHTML: true,
                  y: -5,
                  x: 0
                },
                zIndex: 3
              }
            ],
            gridLineWidth: 1,
            gridZIndex: 1,
            gridLineColor: "rgb(230, 230, 230)",
            opposite: true
          },
          {
            top: "56%",
            height: "42%",
            tickAmount:4,
          }
        ],
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [
                  1,
                  Highcharts.Color(Highcharts.getOptions().colors[0])
                    .setOpacity(0)
                    .get("rgba")
                ]
              ]
            },
            marker: {
              enabled: false,
              states: {
                hover: {
                  enabled: false
                }
              }
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            threshold: null
          },
          candlestick: {
            upLineColor: "transparent", // docs
            upColor: "rgb(235, 106, 101)",
            color: "rgb(121, 170, 111)"
          },
          macd: {
            color: "rgb(199, 103, 103)",
            marker: {
              enabled: false,
              lineColor: "rgb(39, 40, 61)",
              states: {
                hover: {
                  enabled: false
                }
              }
            }
          }
        },
        series: [
          {
            name:"MA",
            type: "candlestick",
            id: "candlestick",
            data: this.data,
            fillColor: "",
            lineColor: "",
            allowPointSelect: false,
            index: 4,
            colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
            events:{
              drag(a){
              }
            }
          },
          {
            name:"MA1",
            type: "line",
            yAxis: 0,
            allowPointSelect: false,
            index: 5,
            data: this.data_.MA1,
            
          },
          {
            name:"MA2",
            type: "line",
            yAxis: 0,
            allowPointSelect: false,
            index: 5,
            data: this.data_.MA2,
          },
          {
            name:"MA3",
            type: "line",
            yAxis: 0,
            allowPointSelect: false,
            index: 5,
            data: this.data_.MA3,
          },
          {
            name:"MA4",
            type: "line",
            yAxis: 0,
            allowPointSelect: false,
            index: 5,
            data: this.data_.MA4,
          },
          {
            // Two different zones:
            type: 'macd',
            yAxis: 1,
            linkedTo: 'candlestick',
          },
          // {
          //   type: "macd",
          //   yAxis: 1,
          //   data:this.data,
          //   linkedTo: 'candlestick',
          //   // allowPointSelect: false,
          //   index: 4
          // },
          {
            name:"DEA",
            type: "line",
            yAxis: 1,
            allowPointSelect: false,
            index: 5,
            data: this.data_.DEA,
          },
          {
            name:"DIF",
            type: "line",
            yAxis: 1,
            allowPointSelect: false,
            index: 5,
            data: this.data_.DIF,
          },
        ]
      })

标签： javascripthighcharts