angular - använda mätare i ionic 3

Jag gör ett projekt i Ionic 3 och behöver använda en mätare i det.

Exemplen är från Ionic 2 och det är svårt att förstå och integrera det. Kan någon vänligen förklara hur man löser detta problem? Om någon har en fungerande mätare, kan ni vänligen dela koden. Det skulle vara till hjälp för alla.

Svar #1

Du kan använda highcharts-mätare.

Jag har en ganska komplex. Den har både mätare och paj. Med andra ord en anpassad komponent. Men du kan enkelt få idén genom att använda den Fiddler.

Notera: Jag har lagt min fungerande kod här. Vänligen justera som du vill.

Eftersom du använder Ionic3/ Angular kan du använda dessa npm-paket:

npm i highcharts - -save

npm i highcharts-more - -save

npm i highcharts-solid-gauge  - - save

html

 <div [id]="data?.chartId" class="my-chart"></div>

ts

import * as HighCharts from 'highcharts';
import HighchartsMore from 'highcharts-more';
HighchartsMore(HighCharts);

constructor(){}

showChart(totalOfBudgetAndContingency: number, paidPercentage: number, remainingPercentageExcludingPaid: number, contingencyPercentage: number,
    spent: number, spentOnChart: number, remainingAmount: number, daysToGo: number, spentOverColor: string, chartId: string) {
    let chart = HighCharts.chart(chartId, {
      "chart": {
        "height": 400,
        "renderTo": "container",
        "plotBackgroundColor": null,
        "plotBackgroundImage": null,
        "plotBorderWidth": 0,
        "plotShadow": false,
        "backgroundColor": "white"
      },
      "credits": {
        "enabled": false
      },
      "tooltip": {
        "enabled": true
      },
      "title": {
        "useHtml": true,
        "text": "<div style=\"font-size: 1.6rem;\">Remaining</div><br/><div style=\"font-size: 20px;color:" + spentOverColor + "\">" + remainingAmount.toLocaleString() + "</div>",
        "align": "center",
        "verticalAlign": "top",
        "y": 120,
      },
      "subtitle": {
        "useHtml": true,
        "text": "<div style=\"font-size: 1.6rem;\">Days To Go</div><br/><div style=\"font-size: 16px;\">" + daysToGo + "</div>",
        "align": "center",
        "verticalAlign": "top",
        "y": 170,
      },
      "pane": {
        "center": ["50%", "47%"],
        "size": "70%",
        "startAngle": -90,
        "endAngle": 90,
        "background": {
          "borderWidth": 0,
          "backgroundColor": "transparent",
          "innerRadius": "95%",
          "outerRadius": "100%",
          "shape": "arc"
        }
      },
      "yAxis": [{
        "lineWidth": 0,
        "min": 0,
        "max": totalOfBudgetAndContingency, /* Budget + Contingency */
        tickColor: 'white',
        tickWidth: 4,
        minorTickInterval: 'auto',
        minorTickLength: 3,
        minorTickPosition: 'inside',
        tickPixelInterval: 50,
        tickPosition: '',
        tickPositioner: (min, max) => {
          var ticks = [],
            tick = min,
            step = Math.round((max - min) / 10);
          while (tick < max - step / 2) {
            ticks.push(Math.round(tick));
            tick += step;
          }
          ticks.push(Math.round(max));
          return ticks;
        },
        tickLength: 30,

        "labels": {
          "enabled": true,
          distance: 30,
          style: {
            color: '#50a2a7',
            font: '11px Trebuchet MS, Verdana, sans-serif'
          }
        },
        "title": {
          "text": "",
          "useHTML": false,
          "y": 80
        },
        "pane": 0
      }],
      "plotOptions": {
        "series": {
          "enableMouseTracking": false
        },
        "pie": {
          "dataLabels": {
            "enabled": true,
            "distance": 0,
            "style": {
              "fontWeight": "bold",
              "color": "white",
              "textShadow": "0px 1px 2px black"
            }
          },
          "size": "75%",
          "startAngle": -90,
          "endAngle": 90,
          "center": ["50%", "47%"]
        },
        "gauge": {
          "dataLabels": {
            "enabled": false
          },
          "pivot": {
            "radius": 80,
            "borderWidth": 1,
            "borderColor": "transparent",
            "backgroundColor": "white"
          },
          "dial": {
            "radius": "100%",
            "backgroundColor": "#e9b44c",
            "borderColor": "",
            "baseWidth": 60,
            "topWidth": 1,
            "baseLength": "5%",
            "rearLength": "5%"
          }
        }
      },

      "series": [{
        "type": "pie",
        "name": "Budget",
        "innerSize": "80%",
        "data": [{
          "y": paidPercentage, /* Paid as percentage */
          "name": "",
          color: 'rgba(80,162,167, 0.3)'
        }, {
          "y": remainingPercentageExcludingPaid, /* Remaining as percentage excluding paid */
          "name": "",
          color: 'rgba(187,187,187, 0.2)'
        }, {
          "y": contingencyPercentage, /* Contingency as percentage */
          "name": "",
          color: 'rgba(155,41,21, 0.9)'
        }]
      }, {
        "type": "gauge",
        "name": "Spent",
        "data": [spentOnChart], /* Spent */
        "dial": {
          "rearLength": 0
        }
      }],
    });
  }

Här är fungerande Fiddler