25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

navigation.md 956 B

123456789101112131415161718192021222324252627
  1. # Navigation
  2. In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where `isNavigable` comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point.
  3. ```js
  4. isNavigable: true // default: false
  5. ```
  6. Try and traverse this chart with arrow-keys.
  7. <project-demo data="2" v-bind:config="{
  8. type: 'bar',
  9. height: 140,
  10. isNavigable: 1,
  11. colors: ['light-blue'],
  12. axisOptions: { xAxisMode: 'tick' },
  13. barOptions: { spaceRatio: 0.2 },
  14. }">
  15. </project-demo>
  16. Each time a data point is activated, a new `data-select` event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage.
  17. ```js
  18. chart.parent.addEventListener('data-select', (e) => {
  19. update_moon_data(e.index); // e contains index and value of current datapoint
  20. });
  21. ```