基于从Highstock中的rangeSelector中选择的范围的自定义滴答 [英] custom ticks based on selected range from rangeSelector in Highstock

问题描述

当rangeSelector设置为All时，我试图让我的Highcharts / Highstock图表显示一个自定义打勾，但我设置了这种方式，但是当我尝试使用图形的交互部分时抛出错误

下面的答案来自

我在谈论蓝色突出显示的部分，当我移动它时，它会抛出错误

我试图让图表每天在所有rangeSelector上有2个图表，显示当天的第一个点和一天中的最后一个点。我做错了什么？

编辑1：更新为完整配置，X轴现在被原始答案打乱，自定义范围选择器上的刻度仍在工作。添加图片以显示发生了什么

< a href =https://i.stack.imgur.com/BTgc4.png =nofollow noreferrer>

>每次更改要在图形上显示的范围时都会引发事件。它可以有多个来源：

• 按钮点击范围选择器


• 导航


• 等。

事件的实际属性取决于其来源。如果你用 console.log（e）输出事件，你会发现它们对于这两个来源并不相同：

$ {
trigger：
$ b <$ p $ rangeSelectorButton，
rangeSelectorButton：{
text：2Hour，
type：hour，
count：2，
}，
.. 。
}


在导航器中处理拖动

  {
 trigger：navigator，
 triggerOp：navigator-drag，
 rangeSelectorButton： undefined 
 
  

如果您在导航器中拖动手柄，则没有 rangeSelectorButton ，因为它没有意义：在这种情况下，没有按钮被按下。

错误，您可以在触发器属性中添加一个检查： $ b

  events {
 setExtremes：function（e）{
 if（e.trigger ===rangeSelectorButton&& e.rangeSelectorButton.text ===All）{
 ... 
} 
} 
} 
  

如何解决实际问题

现在，REAL问题。您希望根据显示的内容更改标记：每天的开始和结束，或者如果不是完整的一天，则为小时。你可以用 e.min 和 e.max 来做到这一点，它代表选定的时间范围。

像这样：

setExtremes：function（e ）{
var range = e.max - e.min;

//间隔一天或一小时的时间间隔
var ticksSpacing =范围> = 86400 * 1000？ 86400：3600;

this.update（{
tickPositioner：function（）{
var positions = []，
info = this.tickPositions.info;
for （var x = this.dataMin; x <= this.dataMax; x + = ticksSpacing * 1000）{// Seconds * 1000 for ticks
positions.push（x）;
};
positions.info = info;
回报仓位;
}
}，false）;
}


I am trying to get my Highcharts/Highstock chart to display a custom tick when the rangeSelector is set to All, I have it setup this way, but is throwing me errors when I try to use the interactive portion of the graph

Received below answer from Highstock Change tick interval on range selector change

  componentDidMount() {
    // Timezone Offset for PST standard is UTC timezone
    Highcharts.setOptions({
        global: {
          timezoneOffset: 8 * 60
        },
        lang: {
          thousandsSep: ','
        }
    });
    Highcharts.stockChart('chart', {
      chart: {
          backgroundColor:'rgba(255, 255, 255, 0.0)',
          height: 400,
          zoomType: 'xy'
      },

      title: {
          text: 'Bitcoin Chart',
          style: {
            color: 'white'
          }
      },

      navigator: {
        trigger: "navigator",
        triggerOp: "navigator-drag",
        rangeSelectorButton: undefined,
        handles: {
          backgroundColor: 'white',
          borderColor: 'black'
        }
      },

      scrollbar: {
        enabled: false
      },

      rangeSelector: {
        buttons: [{
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'day',
            count: 7,
            text: '7d'
        }, {
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }, {
            type: 'all',
            text: 'All'
        }],
          selected: 6,
          // styles for the buttons
          buttonTheme: {
            fill: 'black',
            // stroke: 'none',
            'stroke-width': 0,
            r: 8,
            style: {
                color: 'white',
                fontWeight: 'bold'
            },
            states: {
                hover: {
                },
                select: {
                    fill: 'white',
                    style: {
                        color: 'black'
                    }
                }
            }
          },
          // Date Selector box
          inputBoxBorderColor: 'black',
          inputBoxWidth: 120,
          inputBoxHeight: 18,
          inputStyle: {
              color: 'black',
              fontWeight: 'bold'
          },
          labelStyle: {
              color: 'silver',
              fontWeight: 'bold'
          },
      },

      series: [{
          name: 'Bitcoin Price',
          color: 'black',
          data: this.props.data.all_price_values,
          type: 'area',
          threshold: null,
          tooltip: {
            valuePrefix: '$',
            valueSuffix: ' USD',
            valueDecimals: 2
          }
      }],

      plotOptions: {
          series: {
              fillColor: {
                  linearGradient: [0, 0, 0, 0],
                  stops: [
                      [0, '#FF9900'],
                      [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                  ]
              }
          }
      },

      xAxis: {
        events: {
          setExtremes: function(e) {
            if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
              var range = e.max - e.min;

              // ticks spaced by one day or one hour
              var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

              this.update({
                  tickPositioner: function() {
                      var positions = [],
                      info = this.tickPositions.info;
                      for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                          positions.push(x);
                      };
                      positions.info = info;
                      return positions;
                  }
              }, false);
            }
          }
        },
        title: {
          enabled: true,
          text: 'Date (Timezone: PST)',
          style: {
            color: 'white'
          }
        },
        labels: {
          style: {
            color: 'white'
          }
        },
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%b %e, %Y'
        },
        tickInterval: 1
      },

      yAxis: {
        floor: 0,
        labels: {
          formatter: function () {
                    return '$' + this.axis.defaultLabelFormatter.call(this);
            },
          format: '{value:,.0f}',
          align: 'left',
          style: {
            color: 'white'
          },
        },
      },
      // Mobile Design
      responsive: {
          rules: [{
              condition: {
                  maxWidth: 600
              },
              chartOptions: {
                  chart: {
                      height: 400
                  },
                  subtitle: {
                      text: null
                  },
                  navigator: {
                      enabled: false
                  }
              }
          }]
      }
    });
  }

I am talking about the blue highlighted section, when I move it, it throws an error

I am trying to get the charts to have 2 plots per day on ALL rangeSelector, displaying the first point in the day and the last point in a day. What am I doing wrong?

EDIT 1 : Updated to full config, X Axis is now being disrupted by the original answer, ticks on custom range selector is still in works. Added images to show what's going on

解决方案

The setExtremes event is raised each time you change the range to be displayed on the graph. It can have several origins:

• A button click in the range selector
• An handle drag in the navigator
• etc..

The actual properties of the event depend on its origin. If you output the event with console.log(e), you'll see that it's not the same for these two origins:

Button click in the range selector

{
    trigger: "rangeSelectorButton",
    rangeSelectorButton: {
        text: "2Hour", 
        type: "hour",
        count: 2, 
    }, 
    ...
}

Handle drag in the navigator

{
    trigger: "navigator", 
    triggerOp: "navigator-drag", 
    rangeSelectorButton: undefined
}

If you drag the handle in the navigator, there's no rangeSelectorButton attached to the event, because it doesn't make sense: in that case, no button is pressed.

To fix your error, you can add a check on the trigger property:

 xAxis: {
    events: {
      setExtremes: function(e) {
        if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
           ...
        }
      }
   }

How to solved the actual issue

Now, the REAL issue. You want to change the ticks based on what is displayed: either the beginning and end of each day, or hours if not a complete day. You can do that with e.min and e.max, that represent the selected time range.

Like so:

setExtremes: function(e) {
    var range = e.max - e.min;

    // ticks spaced by one day or one hour
    var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

    this.update({
        tickPositioner: function() {
            var positions = [],
            info = this.tickPositions.info;
            for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                positions.push(x);
            };
            positions.info = info;
            return positions;
        }
    }, false);
}

这篇关于基于从Highstock中的rangeSelector中选择的范围的自定义滴答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！