在 ionic 3 中使用仪表
using gauges in ionic 3
我正在 Ionic 3 中做一个项目,需要在其中使用一个仪表。
例子是ionic 2的,理解难度和整合难度大。
谁能解释一下如何解决这个问题?
如果有人有工作量规,请分享代码。
对大家有帮助。
您可以使用 highcharts gauge.
我有一个相当复杂的。它既有量表又有馅饼。换句话说,自定义组件。但是您可以使用 Fiddler 轻松获得想法。
注意:我已经把我的工作代码here.Please调整成你想要的。
由于您正在使用 Ionic3/ Angular
,因此您可以使用这些 npm packages
:
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
}
}],
});
}
这里正在工作Fiddler
我正在 Ionic 3 中做一个项目,需要在其中使用一个仪表。
例子是ionic 2的,理解难度和整合难度大。 谁能解释一下如何解决这个问题? 如果有人有工作量规,请分享代码。 对大家有帮助。
您可以使用 highcharts gauge.
我有一个相当复杂的。它既有量表又有馅饼。换句话说,自定义组件。但是您可以使用 Fiddler 轻松获得想法。
注意:我已经把我的工作代码here.Please调整成你想要的。
由于您正在使用 Ionic3/ Angular
,因此您可以使用这些 npm packages
:
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
}
}],
});
}
这里正在工作Fiddler