Ионная диаграмма Chartjs Линия IOS проблема рендеринга - PullRequest
Новая
       10

Ионная диаграмма Chartjs Линия IOS проблема рендеринга

0 голосов
/ 20 марта 2019

Я использую ionic Framework для разработки приложения в среде 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
          }
        }]
      }
    }
  });
}

диаграмма в Android / Web диаграмма в ios

...