Highcharts 创建自定义下拉范围选择器/日期选择器

Question

I want to create a custom dropdown range selector for my graph. For Example: rather than the default range selector given by the Highcharts. I want to have it as the image shown. I tried creating a html options however, the chart.update does not work on my code .ts file. How can I have the same output as the image shown.

highstock.ts

export class HighchartStockComponent {
  public resultSetOptions: TruCoreSelectOptionInterface[] = [
    {
      options: [
        {label: '1m', value: '0', selected: true},
        {label: '3m', value: '1'},
        {label: '6m', value: '2'},
        {label: 'YTD', value: '3'},
        {label: 'All', value: '5'},
      ],
    },
  ];

  @Input() chartOptions: Options;
  chart: Chart;

  Highcharts: typeof Highcharts = Highcharts;
 constructor() {
this.Highcharts.setOptions({
      exporting: {
        showTable: true,
        csv: {
          dateFormat: '%Y-%m-%d',
        },
      },
      chart: {
        style: {
          fontFamily: '"Graphik Regular", sans-serif',
          fontSize: '12px',
          fontWeight: 'normal',
        },
     
        
      },
      
      lang: {
        thousandsSep: '\u066C',
        rangeSelectorZoom: '',
        // rangeSelectorFrom: 'From',
        // rangeSelectorTo: 'To'
      },
    });
  }
 // range(event) {
  //   if (event) {
  //     this.chart.update({
  //       rangeSelector: {
  //         selected: event.value,
  //       },
  //     });
  //   }
  // }
 
}

highstock.html

<mat-tab-group class="mat-tab--retail tru-core-margin-left--md tru-core-margin-right--md" animationDuration="0ms">
  <mat-tab label="Graph" class="mat-table--retail">
    <tru-core-grid class="container">
      <div class="range-selector">
        <tru-core-select
          id="range"
          [options]="resultSetOptions"
          (truCoreSelectChange)="range($event)"
          class="tru-core-margin-left--xs tru-core-margin-right--xs"
        >
        </tru-core-select>
      </div>
      <highcharts-chart id="chart" [Highcharts]="Highcharts" [constructorType]="'stockChart'" [options]="chartOptions" style="overflow: scroll;">
      </highcharts-chart>
    </tru-core-grid>
  </mat-tab>

image

Answer 1

Simplifying how to build custom options, inside the ts file next to the class you are exporting build something similar:

options = [
  [1.2e3, '1.2s'],
  [24e3, '24s'],

  [12e4, '2m'],
  [24e4, '4m'],
  [48e4, '8m'],
  [72e4, '12m'],
  [144e4, '24m'],
  [216e4, '36m'],

  [36e5, '1h'],
  [216e5, '6h'],
  [432e5, '12h'],

  [86.4e6, '1d']
];

// changing the range from dropdown
rangeChange(event) {
  
}

At your HTML template:

<div class="range-selector-btn-dropdown">
    Zoom view: 
    <select id="range-selector-btn" 
    (change)="rangeChange($event)"
    [(ngModel)]="selectedValue">
        <option *ngFor="let option of options;"
        [value]="option[0]">{{option[1]}}</option>
   </select>
</div>