Как настроить масштабирование по времени в ChartJS? - PullRequest
Новая
       26

Как настроить масштабирование по времени в ChartJS?

0 голосов
/ 02 ноября 2018

У меня есть следующие данные для линейного графика: 

[
 {
   x: 'Mon Sep 29 2018 14:26:53 GMT+0100',
   y: 100
 },
 {
   x: 'Mon Oct 15 2018 10:40:31 GMT+0100',
   y: 400
 }
]

Моя цель - установить определенный временной интервал по умолчанию, изменить его диапазон и увеличить динамически. Если нет данных для показа, это нормально.

Я использую chartjs-plugin-zoom , который позволяет мне свободно панорамировать по оси x, что очень хорошо. К сожалению, zoom устанавливается на события пользователя через этот плагин.

По сути, я хочу, чтобы кнопки переключались между масштабированием времени, а затем перемещались по оси x.

У меня вопрос: нужно ли устанавливать «пределы» в самом ChartJS и разрешать плагину только панорамирование? Если да, то как это сделать «свободно», не учитывая данные (ChartJS пытается уместить все данные в представлении, исправьте меня, если я ошибаюсь)

Я попробовал опции масштабирования на плагине, но они, похоже, ни на что не влияют: 

zoom: {
        enabled: true,
        drag: false,
        mode: '',
        rangeMin: {
            x: moment().format(),
            y: null
        },
        rangeMax: {
            x: moment().add(7, 'day').format(),
            y: null
        }
    }

Спасибо!

Ответы [ 2 ]

0 голосов
/ 09 августа 2019

Вы должны указать тип данных, который вы использовали в своей шкале.

Например:

если вы используете объект Date для одной из осей, которые вы хотите панорамировать или масштабировать, это может быть полезно для вас: 

  import { Chart } from 'chart.js';
  import  'chartjs-plugin-zoom';

  ...


  let date_list=["2019-08-09","2019-08-10","2019-08-11","2019-08-12","2019-08-13","2019-08-14"]
  let value_list=[1000,2000,3000,2500,3000,5000]
  let start_date = new Date(date_list[0]);
  let end_date = new Date(date_list[date_list.length-1]);

  let range_min = new Date(date_list[0]);  //start date
  range_min.setDate(range_min.getDate()-10);

  let range_max = new Date(date_list[date_list.length-1]);  //end date
  range_max.setDate(range_max.getDate()+10);

  this.chart = new Chart(this.my_chart.nativeElement, {
    type: 'bar',
    data: {

      labels: date_list,
      datasets: [
        {
          data: value_list, 
        }
      ]
    },
    options: {
      responsive: true,
      scales:{
        yAxes: [{
          type: 'linear',
          ticks: {
            beginAtZero: true,
          }
        },
        ],
        xAxes: [{
          distribution: 'linear',
          type: "time",
          time: {
            min: start_date.toDateString(),
            max: end_date.toDateString(),
            unit: "day",
            stepSize: "1",
          },

        }],
      },
      pan: {
        enabled: true,
        mode: 'x',
        rangeMin: {
          x: range_min,
        },
        rangeMax: {
          x: range_max,
        },     
      },
      zoom: {
        enabled: true,         
        mode: 'x',
        threshold: 10,
        rangeMin: {
          x: range_min,
        },
        rangeMax: {
          x: range_max,
        },     
      },
    }
  });

Также не забудьте установить зависимости.

0 голосов
/ 13 января 2019

Попробуйте это

  1. Установите режим «Включено панорамирование» на «false», включите масштабирование и перетащите на «true».
  2. Установить scale.xAxes [0] .type в значение 'time'.
  3. Установите scale.xAxes [0] .time.min и max для первого и конечного массива меток данных, чтобы ограничить масштабирование времени.
  4. Также установите диапазон панорамирования min и max на первый и конец массива меток данных. Это ограничит движение панорамы.

Например: 

// if your data

myChart.data.labels = [
    moment(data[0].timestamp),
    moment(data[1].timestamp),
    moment(data[2].timestamp),
    moment(data[3].timestamp)
]

// then set

pan: {
    enabled: false,
    mode: "x",
    speed: 10,
    threshold: 10,
    rangeMin: {
        x: new Date(data[0].timestamp).getTime() - offset
    },
    rangeMax: {
        x: new Date(data[3].timestamp).getTime() + offset
    }
},
zoom: {
    enabled: true,
    drag: true,
    mode: "x",
    sensitivity: 0.3,
    rangeMin: {
        x: 3600000 - offset // let say the zoom range min is 1 hour
    },
    rangeMax: {
        x: ((new Date(data[3].timestamp).getTime()) - (new Date(data[0].timestamp).getTime())) + offset
    }
},
scales: {
    xAxes: [{
        type: "time",
        time: {
            min: new Date(data[0].timestamp).getTime(),
            max: new Date(data[3].timestamp).getTime()
        }      
    }]
}
  • примечание: в моем случае отметка времени находится в строке ISO. И метки должны быть в формате момента.

  • примечание: вы также можете добавить смещение в мин. И макс. установите смещение на 0, если не используется.

    1. Наконец, чтобы переключаться между панорамированием и масштабированием, вам нужно сделать следующее: 
// since myChart.update() is not working. You need to do this.

var myChartOptions = myChart.options; // need to store in variable.

if (Pan) {
    myChartOptions.pan.enabled = true;
    myChartOptions.zoom.enabled = false;
    myChartOptions.zoom.drag = false;
    myChart.options = myChartOptions; // update myChart.options.
}
else if (Zoom) {
    myChartOptions.pan.enabled = false;
    myChartOptions.zoom.enabled = true;
    myChartOptions.zoom.drag = true;
    myChart.options = myChartOptions; // update myChart.options.
}
...