【发布时间】：2018-02-04 14:35:53
【问题描述】：
我正在制作一个自定义线性仪表图表
$(function () {
/**
* Highcharts Linear-Gauge series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
wrap = H.wrap,
each = H.each;
defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.lineargauge = H.extendClass(columnType, {
type: 'lineargauge',
//inverted: true,
setVisible: function () {
columnType.prototype.setVisible.apply(this, arguments);
if (this.markLine) {
this.markLine[this.visible ? 'show' : 'hide']();
}
},
drawPoints: function () {
// Draw the Column like always
columnType.prototype.drawPoints.apply(this, arguments);
// Add a Marker
var series = this,
chart = this.chart,
inverted = chart.inverted,
xAxis = this.xAxis,
yAxis = this.yAxis,
point = this.points[0], // we know there is only 1 point
markLine = this.markLine,
ani = markLine ? 'animate' : 'attr';
// Hide column
point.graphic.hide();
if (!markLine) {
var path = inverted ? ['M', 0, 0, 'L', -10, -10, 'L', 10, -10, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -10, -10, 'L', -10, 10,'L', 0, 0, 'L', xAxis.len, 0];
markLine = this.markLine = chart.renderer.path(path)
.attr({
fill: series.color,
stroke: series.color,
'stroke-width': 2
}).add();
}
markLine[ani]({
translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
translateY: inverted ? xAxis.top : yAxis.top + yAxis.len - yAxis.translate(point.y)
});
}
});
})(Highcharts);
$('#container').highcharts({
chart: {
type: 'lineargauge',
margin: [100, 20, 40, 20],
inverted: true
},
credits: {
enabled: false
},
exporting: false,
title: {
text: '',
color: '#C0C0C0'
},
xAxis: {
lineColor: '#C0C0C0',
labels: {
enabled: false
},
tickLength: 0,
},
yAxis: {
min: -1.9,
max: 4.4,
tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
tickLength: 1,
tickWidth: 1,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 1,
minorTickInterval: 5,
minorTickWidth: 1,
minorTickLength: 5,
minorGridLineWidth: 0,
startOnTick: true,
endOnTick: true,
title: null,
labels: {
format: '{value}%'
},
plotBands: [{
from:-1.9,
to: -0.1,
color: 'rgba(229, 27, 27, 1)'
}, {
from: -0.1,
to: 1.0,
color: 'rgba(250, 121, 33, 1)'
}, {
from: 1.0,
to: 1.5,
color: 'rgba(253, 231, 76, 1)'
},
{
from: 1.5,
to: 4.4,
color: 'rgba(155, 197, 61, 1)'
}]
},
legend: {
enabled: false
},
series: [{
data: [1.1],
color: '#000000',
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
format: '{point.y}%',
y: 70,
}
}]
}, // Add some life
function (chart) {
setInterval(function () {
Highcharts.each(chart.series, function (serie) {
var point = serie.points[0],
newVal,
inc = (Math.random() - 0.5) *10;
newVal = point.y + inc;
if (newVal < -1.9 || newVal > 4.4) {
newVal = point.y - inc;
}
point.update(Math.floor(newVal));
});
}, 2000);
});
});
我想用计数器替换“添加一些生命”部分。在这种情况下，指针从最低点 -1.9 开始 指针在三秒内从起点移动到例如 4.1。每一步持续 50 毫秒 这意味着 60 (3000/50) 步由每步 0.1 (6/60) 组成。希望可以在公式中处理以前的。
如果上述太难了，或许可以使用thiscounter js 插件。但是我的知识太少，无法找到将这个插件与highcharts结合起来的方法。
这个插件的js代码真的很简单：
var options = {useEasing: true,useGrouping: true,separator: '.',decimal:',',};
var demo = new CountUp('myTargetElement', -1.9, 4.1, 1, 3, options);
if (!demo.error) {demo.start();} else {console.error(demo.error);}
也许这问得太多了，但它会使图表完整。再次感谢所有的努力，我非常感谢
【问题讨论】：
-
您好，请检查此jsfiddle.net/ktnmfuqm 超过三秒
-
@Deep3015 感谢您的快速回复！是否可以修改代码停止在4.1？
标签： javascript jquery highcharts counter