Ionic Chartjs折线图IOS渲染问题

时间:2019-03-20 09:44:14

标签: javascript android ios ionic-framework chart.js

我正在使用离子框架在Android和Ios环境中开发应用程序。我的应用程序中有一个图表,它是折线图,显示了整个日期时间的连续数据。我为图表使用了Chartjs。折线图在android /网络平台上运行良好,但在ios中失败。有人知道背后的原因吗?非常感谢。

这是参考代码。 this.SBP_line和this.DBP_line是传递到图表的数据。它们是数组格式。例如[{x:“ 2019-03-13 0:19:47”,y:130}]

createLineChart(): void {
  //   Chart.scaleService.updateScaleDefaults('linear', {
  //   ticks: {
  //     min: 0,
  //     max: 50, 
  //   }
  // });
  this.lineChartEl = new Chart(this.lineChart.nativeElement, {
    type: 'line',
    data: {
      // labels: this.datetime,
      datasets: [{
          label: 'Systolic Blood Pressure',
          data: this.SBP_line,
          duration: 2000,
          easing: 'easeInQuart',
          backgroundColor: "red",
          borderColor: 'red',
          hoverBackgroundColor: this.chartHoverColours,
          fill: false,
          pointRadius: 5,
          pointHoverRadius: 10,
        },
        {
          label: 'Diastolic Blood Pressure',
          data: this.DBP_line,
          duration: 2000,
          easing: 'easeInQuart',
          backgroundColor: "green",
          borderColor: 'green',
          hoverBackgroundColor: this.chartHoverColours,
          fill: false,
          pointRadius: 5,
          pointHoverRadius: 10,
        }

      ]
    },
    options: {
      hover: {
        mode: null
      },
      pan: {
        // Boolean to enable panning
        enabled: false,

        // Panning directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow panning in the y direction
        mode: 'x'
      },

      // Container for zoom options
      zoom: {
        // Boolean to enable zooming
        enabled: false,

        // Zooming directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'x',

        limits: {
          max: 10,
          min: 0.5
        }
      },
      responsive: true,
      maintainAspectRatio: false,

      legend: {
        display: true,
        boxWidth: 80,
        fontSize: 15,
        padding: 0,
        labels: {
          fontColor: "white",
          fontSize: 18
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            fontColor: "white",
            fontSize: 18,
            beginAtZero: true,
            stepSize: 30,
            max: 240,
            min: 30,
          },
          gridLines: {
            color: 'white',
            lineWidth: 1
          }
        }],
        xAxes: [{
          type: 'time',
          time: {
            min: new Date(this.datetime[-1]).getTime(),
            max: new Date(this.datetime[0]).getTime(),
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
              'day': 'DD MMM '
            }
          },
          ticks: {
            fontColor: "white",
            fontSize: 18,
            autoSkip: true
          },
          gridLines: {
            color: 'transparent',
            lineWidth: 1
          }
        }]
      }
    }
  });
}

chart in Android/Web chart in ios

0 个答案:

没有答案