僅更改HIghStock圖表的“輸入日期”文本而不設置setExtrerems？

Question

我有一個HighStock圖表，它在范圍選擇器按鈕單擊時從左向右移動。 我現在想要做的就是更改范圍選擇器按鈕單擊時的日期輸入文本，而無需任何setExtremes。 我已經隱藏了輸入框，因為我不希望用戶手動輸入日期。 我希望“到”日期文本始終是圖表的最大日期文本。 這意味着我不想在任何按鈕單擊上更改“到”日期文本，而僅在范圍選擇器按鈕單擊上更改“從”日期文本。

在下面的代碼中，圖表“至”文本為（2017年9月15日），並且當用戶單擊任意范圍選擇器按鈕（例如“ 5y”）時，我只想更改“從”文本而不是“至”文本。 單擊后的意思是“從2012年9月15日開始”和“到2017年9月15日之間”。

我知道這是不對的，但我必須做，並且嘗試了很多卻無所適從。

謝謝你的時間。

這是一個小提琴 。

這是代碼。

(function(H) {
  H.wrap(H.RangeSelector.prototype, "clickButton", function(
    proceed,
    i,
    redraw
  ) {
    var rangeSelector = this,
      chart = rangeSelector.chart,
      rangeOptions = rangeSelector.buttonOptions[i],
      baseAxis = chart.xAxis[0],
      unionExtremes =
        (chart.scroller && chart.scroller.getUnionExtremes()) || baseAxis || {},
      dataMin = unionExtremes.dataMin,
      dataMax = unionExtremes.dataMax,
      newMin,
      newMax =
        baseAxis &&
        Math.round(Math.min(baseAxis.max, H.pick(dataMax, baseAxis.max))), // #1568
      type = rangeOptions.type,
      baseXAxisOptions,
      range = rangeOptions._range,
      rangeMin,
      minSetting,
      rangeSetting,
      ctx,
      ytdExtremes,
      dataGrouping = rangeOptions.dataGrouping;

    if (dataMin === null || dataMax === null) {
      // chart has no data, base series is removeddebugger;
      return;
    }

    // Set the fixed range before range is altered
    chart.fixedRange = range;

    // Apply dataGrouping associated to button
    if (dataGrouping) {
      this.forcedDataGrouping = true;
      Axis.prototype.setDataGrouping.call(
        baseAxis || {
          chart: this.chart
        },
        dataGrouping,
        false
      );
    }

    // Apply range
    if (type === "month" || type === "year") {
      if (!baseAxis) {
        // This is set to the user options and picked up later when the axis is instantiated
        // so that we know the min and max.
        range = rangeOptions;
      } else {
        ctx = {
          range: rangeOptions,
          max: newMax,
          dataMin: dataMin,
          dataMax: dataMax
        };

        //newMin = baseAxis.minFromRange.call(ctx);
        //if (H.isNumber(ctx.newMax)) {
        //  newMax = ctx.newMax;
        //}

        newMin = dataMin;
        newMax = newMin + range;
      }
      // Fixed times like minutes, hours, days
    } else if (range) {
      //newMin = Math.max(newMax - range, dataMin);
      //newMax = Math.min(newMin + range, dataMax);

      newMin = dataMin;
      newMax = newMin + range;
    } else if (type === "ytd") {
      // On user clicks on the buttons, or a delayed action running from the beforeRender
      // event (below), the baseAxis is defined.
      if (baseAxis) {
        // When "ytd" is the pre-selected button for the initial view, its calculation
        // is delayed and rerun in the beforeRender event (below). When the series
        // are initialized, but before the chart is rendered, we have access to the xData
        // array (#942).
        if (dataMax === undefined) {
          dataMin = Number.MAX_VALUE;
          dataMax = Number.MIN_VALUE;
          each(chart.series, function(series) {
            var xData = series.xData; // reassign it to the last item
            dataMin = Math.min(xData[0], dataMin);
            dataMax = Math.max(xData[xData.length - 1], dataMax);
          });
          redraw = false;
        }
        ytdExtremes = rangeSelector.getYTDExtremes(dataMax, dataMin, H.useUTC);
        newMin = rangeMin = ytdExtremes.min;
        newMax = ytdExtremes.max;

        // "ytd" is pre-selected. We don't yet have access to processed point and extremes data
        // (things like pointStart and pointInterval are missing), so we delay the process (#942)
      } else {
        addEvent(chart, "beforeRender", function() {
          rangeSelector.clickButton(i);
        });
        return;
      }
    } else if (type === "all" && baseAxis) {
      newMin = dataMin;
      newMax = dataMax;
    }
    rangeSelector.setSelected(i);

    // Update the chart
    if (!baseAxis) {
      // Axis not yet instanciated. Temporarily set min and range
      // options and remove them on chart load (#4317).
      baseXAxisOptions = H.splat(chart.options.xAxis)[0];
      rangeSetting = baseXAxisOptions.range;
      baseXAxisOptions.range = range;
      minSetting = baseXAxisOptions.min;
      baseXAxisOptions.min = rangeMin;
      H.addEvent(chart, "load", function resetMinAndRange() {
        baseXAxisOptions.range = rangeSetting;
        baseXAxisOptions.min = minSetting;
      });
    } else {
      // Existing axis object. Set extremes after render time.
      baseAxis.setExtremes(
        newMin,
        newMax,
        H.pick(redraw, 1),
        null, // auto animation
        {
          trigger: "rangeSelectorButton",
          rangeSelectorButton: rangeOptions
        }
      );
    }
  });
})(Highcharts);

var seriesOptions = [],
  seriesCounter = 0,
  names = ["MSFT", "AAPL"];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {
  var end = new Date().getTime();

  Highcharts.stockChart("container", {
    rangeSelector: {
      selected: 4,
      buttons: [
        {
          type: "year",
          count: 1,
          text: "1y"
        },
        {
          type: "year",
          count: 3,
          text: "3y"
        },
        {
          type: "year",
          count: 5,
          text: "5y"
        },
        {
          type: "all",
          text: "All"
        }
      ]
    },

    yAxis: {
      labels: {
        formatter: function() {
          return (this.value > 0 ? " + " : "") + this.value + "%";
        }
      },
      plotLines: [
        {
          value: 0,
          width: 2,
          color: "silver"
        }
      ]
    },

    xAxis: {},

    plotOptions: {
      series: {
        compare: "percent",
        showInNavigator: true
      }
    },

    tooltip: {
      pointFormat:
        '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      valueDecimals: 2,
      split: true
    },

    series: seriesOptions
  });
}

$.each(names, function(i, name) {
  $.getJSON(
    "https://www.highcharts.com/samples/data/jsonp.php?filename=" +
      name.toLowerCase() +
      "-c.json&callback=?",
    function(data) {
      seriesOptions[i] = {
        name: name,
        data: data
      };

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter += 1;

      if (seriesCounter === names.length) {
        createChart();
      }

      var minDate = $(
        ".highcharts-input-group .highcharts-range-input:eq(0)"
      ).text();
      var maxDate = $(
        ".highcharts-input-group .highcharts-range-input:eq(1)"
      ).text();
    }
  );
});

Answer 1

如果您始終希望在“到”輸入中顯示最長日期，為什么要包裝clickButton來反轉顯示的范圍（從最左側到右側）？ 對於您的問題，您可以包裝clickButton函數，但只能在其末尾擺脫setExtremes調用，並為兩個輸入添加調用setInputValue函數以更改輸入內部顯示的值，盡管這實際上沒有任何意義。

例：
https://jsfiddle.net/vefahw8a/