Ionic 如何制作带时间y轴的图表?

gcmastyq  于 2023-02-10  发布在  Ionic
关注(0)|答案(2)|浏览(147)

我有这样的数据:

{
"measurements": [
{
  "id": 10,
  "key": "Demoo",
  "value": "00:00:03.733;",
  "date": "2023-02-08",
  "time": "11:05",
  "value_time_formatted": "00:00:03.733"
},
{
  "id": 11,
  "key": "Demooo 2",
  "value": "00:00:05.191;",
  "date": "2023-02-08",
  "time": "11:31",
  "value_time_formatted": "00:00:05.191"
},
{
  "id": 12,
  "key": "Demo 22",
  "value": "00:00:03.002;",
  "date": "2023-02-08",
  "time": "11:31",
  "value_time_formatted": "00:00:03.002"
}
]}

当我尝试从日期作为标签和value_time_formatted作为值制作一个折线图时,我得到这个错误:

ERROR TypeError: Cannot create property 'data' on string '00:00:03.733'

绑定图表值的代码如下所示:

this.lineBarLabels = [];
      this.lineBarValue = [];
      res.measurements.forEach(element => {
        this.lineBarLabels.push(element.date);
        this.lineBarValue.push(element.value_time_formatted);
      });

      this.lineBar = new Chart(this.linePresents.nativeElement, {
  type: 'line',
  data: {
    labels: this.lineBarLabels,
    datasets: this.lineBarValue
  }
});
this.lineBar.update();

我试着把时间转换成毫秒,但是在屏幕上看起来很难看,用户需要把它转换回小时、分钟、秒和毫秒,这对客户来说太糟糕了:(

weylhg0b

weylhg0b1#

您的代码存在一些问题,下面是我可以发现的两个问题:

  • 发生Main错误是因为chartjs期望属性dataset为对象数组,因此在您的情况下,您必须将代码更改为如下形式:
this.lineBar = new Chart(this.linePresents.nativeElement, {
    type: 'line',
    data: {
        labels: this.lineBarLabels,
        datasets: [{data: this.lineBarValue}]
    }
});
  • 数组this.lineBarLabels从未设置(将是一个空数组),您必须更改:this.lineBarLabels.includes(element.date);this.lineBarLabels.push(element.date);

这些都是主要的问题,我不明白你应该寻找什么样的输出,我不认为将值设置为字符串value_time_formatted将工作,但如果你解决了上面提到的几点,你会更接近一个工作图表。

    • 更新日期:**

看起来你已经解决了问题中的错误,如果你想改进你的代码,这里有一个提示给你时间转换(link to relevant documentation):

const date = new Date();

// A cleaner solution
let aShortWay = date.toISOString().substring(11,23);

// Your Sode: Not really readable, and pretty long
let yourCode = (date.getUTCHours() ? (date.getUTCHours() > 9 ? date.getUTCHours() : '0' + date.getUTCHours()) : '00') + ':' +
                (date.getUTCMinutes() ? (date.getUTCMinutes() > 9 ? date.getUTCMinutes() : '0' + date.getUTCMinutes()) : '00') + ':' +
                (date.getUTCSeconds() ? (date.getUTCSeconds() > 9 ? date.getUTCSeconds() : '0' + date.getUTCSeconds()) : '00') + '.' +
                (date.getUTCMilliseconds() > 99 ? date.getUTCMilliseconds() : date.getUTCMilliseconds() > 9 ? '0' + date.getUTCMilliseconds() : '00' + date.getUTCMilliseconds());

console.info(`aShortWay Time:${aShortWay}`)
console.info(`yourCode Time:${yourCode}`)
pes8fvy9

pes8fvy92#

我终于找到了解决办法,希望有人能以正确的方式使用它:)
在这部分代码之后:
res.measurements.forEach(element => { this.lineBarLabels.push(element.date); this.lineBarValue.push(element.value_time_formatted); }); this.createLineChart();我创建了这个createLineChart()方法来解析和呈现图表:

public createLineChart() {
this.lineBar = new Chart(this.linePresents.nativeElement, {
    type: 'line',
    data: {
      labels: this.lineBarLabels,
      datasets: [{label: this.translate.instant('time'), data: this.lineBarValue, fill: false}]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          ticks: {
            callback: function (value) {
              const date = new Date(Number(value) * 1000);
              return date.toISOString().substring(11,23);
            }
          }
        }
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function (context) {
              const date = new Date(Number(context.formattedValue) * 1000);
              return date.toISOString().substring(11,23);
            }
          }
        }
      }
    }
  }
);
this.lineBar.update();
}

相关问题