时间戳

首页 > 解决方案 > HighStock 中 xAxis 的 softMin/softMax 未设置？

javascript - HighStock 中 xAxis 的 softMin/softMax 未设置？

问题描述

查看 Highstock 文档时，它说 xAxis 有一个 softMin 和 softMax，但如果我利用日期，它似乎不能正确表示请求的日期范围。

我一直需要执行以下操作：找到 xAxis 数据的间隔，然后在这些时间点用空数据填充数组的前端/末端，以正确传达信息。

这可行，但我认为 HighStock 的软值应该能够处理这个问题。

在示例用例中：您可以设置以下内容：

{
    chart: {
      type: this.type || 'line',
    },
    title: {
      text: this.title || ''
    },
    credits: {
      enabled: false
    },
    rangeSelector: {
      inputEnabled: false,  // Specific to the Date Range Picker.
      enabled: false         // Specific to the Quick Selects for YTD, 6 mo, zoom.
    },
    navigator: {
      adaptToUpdatedData: true
    },
    scrollbar: {
      enabled: false
    },
    legend: {
      enabled: true
    },
    xAxis: {
      min: undefined,
      max: undefined,
      softMin: undefined,
      softMax: undefined,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%b %e'
      }
    },
    // yAxis: {
    //   title: { text: ''}, opposite: true, type: 'linear'
    // },
    plotOptions: {
      series: {
        dataGrouping: {
          approximation: 'sum',
          groupPixelWidth: 25,
          forced: true,
          units: [
            ['minute', [30]],
            ['day', [1, 7, 15]],
            ['month', [1, 3, 6]]
          ]
        }
      }
    },
    series: []
  }

所以我看日期好像它们是数字一样，new Date().getTime() 但是如果我想设置 softMin 和 softMax，我想做类似的事情：

xAxis: {
  softMin: new Date().getTime() - 1000 * 3600 * 24 * days_back
  softMax: new Date().getTime()
  }

其中 days_back 是用户定义的变量，用于表示之前查看的天数。

我填充系列信息的方式如下：

const endtime = new Date().getTime();   //The current definition of endtime is now as there is no data for the future.
    const starttime = endtime - 1000 * 3600 * 24 * days;
    opts.series = dataset.map((item, idx, arr) => {
      const name: string = item.name || '';
      const data: any[] = item.data || []; // data is a list of lists.    ][time_as_number, value],...]
      if (data.length > 1) {
        /// The purpose of this code block is to padd out the dataset to the start and end ranges.
        ///  While there is a softMin and softMax, it doesnt work too when with regards to dates.
        ///  This will padd the data to be represenative of the users base selection.
        ///  If the list of data has 0 or 1 points, there is not enough data to define an interval for the target range.
        const difference = data[1][0] - data[0][0];
        let low = data[1][0];
        while (low > starttime) {
          low -= difference;
          data.unshift([low, null]);
        }
        let high = data[data.length - 1][0];
        while (high < endtime) {
          high += difference;
          data.push([high, null]);
        }
      }
      return {
        marker: { enabled: true },
        showInNavigator: true,
        type: 'line',
        name,
        data
      };
    });

有什么我应该考虑的遗漏吗？根据文档的 min/max/minRange/maxRange 不是我想要分配的正确键。

为便于理解，HighStock 文档位于此处：https ://api.highcharts.com/highstock/xAxis.softMin

这是一个示例：https : //jsfiddle.net/sp18efkb/ 您将在此示例中看到我设置了 softMin 但它没有反映。如果我使用一个chart对象，它可以工作。似乎虽然根据 API 是有效的，但它不是有效或受监控的属性。

标签： javascripthighcharts

解决方案

查看 HighStock 图表时，如果您正在查看此图表，则需要设置一个额外的变量。

在 xAxis 中，您需要将属性序数属性设置为 false。为了让导航器以相同的方式运行，您需要使用该属性，将 softmin 和 soft max 设置为相同，并关闭 ordinal。

它看起来像这样：

...

  navigator: {
    adaptToUpdatedData: true,
    xAxis: {
      ordinal: false,
      min: undefined,
      max: undefined,
      softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
      softMax: undefined
    }
  },
  xAxis: {
    ordinal: false,
    min: undefined,
    max: undefined,
    softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
    softMax: undefined,
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%b %e'
    }
  },
...

推荐阅读