Question

我有以下折线图示例数据：

[
 {
   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轴上自由地平移，这非常好。不幸的是，缩放是通过此插件在用户事件上设置的。

基本上我希望有一些按钮可以在时间刻度之间切换，然后在x轴上平移。

我的问题是，我是否需要在ChartJS本身中设置“限制”并让该插件只能平移？如果是，如何不考虑数据就“自由地”执行此操作（ChartJS尝试将所有数据放入视图中，如果我错了，请纠正我）

我尝试了插件上的缩放选项，但它们似乎没有任何影响：

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

谢谢！

Answer 1

尝试一下

将“启用平移”设置为false，将“启用缩放”并将其拖动为true。
将scales.xAxes [0] .type设置为“时间”。
将scales.xAxes [0] .time.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字符串。并且标签必须采用矩格式。
注意：您还可以添加最小和最大偏移量。如果不使用，则将offset设置为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.
}

Answer 2

您必须提供与电子秤相同的数据类型。

例如：

如果将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,
        },     
      },
    }
  });

也不要忘记安装依赖项。

如何在ChartJS中设置时间刻度缩放？

2 个答案: