Javascript 用海图计数器

我正在做一个定制的线性仪表图表

---

也许这要求太高了，但它会使图表完整。再次感谢您的努力，我非常感谢Highcharts不会为文本内容设置动画，只会立即更改内容。我建议在图表顶部创建溢出元素，并在其内部添加计数器插件，然后只设置元素左侧位置的动画

大概是这样的：

HTML:

JS:

根据您的意见，您可以使用clearInterval删除第4.1点之后的设置间隔

function (chart) {
   var myInterval= setInterval(function () {
    i+=0.1;
        Highcharts.each(chart.series, function (serie) {
            var point = serie.points[0];

            if (i > 4.1) {
            clearInterval(myInterval);
                //i=-1.9
            }
            point.update(i);
        });
    }, 500);

}

演示

$function{ /** *Highcharts线性仪表系列插件 */ 函数{ var defaultPlotOptions=H.getOptions.plotOptions， columnType=H.seriesTypes.column， wrap=H.wrap， each=H.each； defaultPlotOptions.lineargauge=H.mergedefaultPlotOptions.column，{}； H.seriesTypes.lineargauge=H.extendClasscolumnType{ 键入：“lineargauge”， //倒：是的， setVisible：函数{ columnType.prototype.setVisible.applythis，参数； 如果这是.markLine{ this.markLine[this.visible？'show'：'hide']； } }, 支点：功能{ //像往常一样画柱子 columnType.prototype.drawPoints.applythis，参数； //添加标记 var系列=此， chart=this.chart， 倒转的，倒转的， xAxis=this.xAxis， yAxis=this.yAxis， point=this.points[0]，//我们知道只有一个点 markLine=this.markLine， ani=标记行？'animate'：'attr'； //隐藏列 point.graphic.hide； 如果！标记线{ var path=inversed？['M'，0，0，'L'，10，-10，'L'，0，0，'L'，0+xAxis.len]：['M'，0，0，'L'，10，-10，'L'，0，0，'L'，xAxis.len，0]； markLine=this.markLine=chart.renderer.pathpath 艾特先生{ 填充：series.color， 笔划：series.color， “笔划宽度”：2 }.添加； } 标记线[ani]{ translateX:inversed？xAxis.left+yAxis.translatepoint.y:xAxis.left， translateY:倒？xAxis.top:yAxis.top+yAxis.len-yAxis.translatepoint.y }; } }; }海图； VarI=-1.9； $'container'.highcharts{ 图表：{ 键入：“lineargauge”， 保证金：[100,20,40,20]， 倒过来：是的 }, 学分：{ 已启用：false }, 出口：假， 标题：{ 正文：， 颜色：“C0C0” }, xAxis：{ 线条颜色：“C0”， 标签：{ 已启用：false }, 长度：0， }, 亚克斯：{ 最小值：-1.9， 最高：4.4， 位置：[-1.9，-0.1,1,1.5,4.4]， 长度：1， 宽度：1， 勾选颜色：“C0C0”， gridLineColor:'C0C0'， 网格线宽度：1， minorTickInterval:5， minorTickWidth:1， minorTickLength:5， minorGridLineWidth:0， 是的， 恩东蒂克：是的， 标题：空， 标签：{ 格式：“{value}%” }, 绘图带：[{ 从：-1.9， 至：-0.1， 颜色：“rgba229，27，27，1” }, { 从-0.1开始， 至：1.0， 颜色：“rgba250、121、33、1” }, { 从：1.0， 至：1.5， 颜色：“RGBA25323761” }, { 从：1.5， 致：4.4， 颜色：“RGBA155197161，1” } ] }, 图例：{ 已启用：false }, 系列：[{ 数据：[-1.9]， 颜色：“000000”， 数据标签：{ 启用：对， 颜色：“000000”， 对齐：'居中'， 格式：“{point.y:，.1f}%”， y:70， } }] }，//增添一些活力 功能图{ var myInterval=setIntervalfunction{ i+=0.1； Highcharts.eachchart.series，functionserie{ var点=系列点[0]； 如果i>4.1{ 间隔时间； //i=-1.9 } point.updatei； }; }, 500; }; }; 容器{ 宽度：600px； 高度：200px； 保证金：1em自动； }

---

嗨，检查这个大于3seconds@Deep3015谢谢你的快速回复！是否可以修改代码以停止在4.1？是否可以加速指针？如果我将500更改为100，指针不等于上述值。我有大约10个图形，我想在同一时间可视化。有没有可能想出一个公式？再次感谢你的帮助！您可以通过更新动画：false check来加快指针速度

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);}

<div id="counter-box">fly!</div>

#counter-box {
  position: absolute;
  z-index: 2;
  top: 80px;
  left: 110px;
}

$('#container').highcharts({
    chart: {
      type: 'lineargauge',
      events: {
        load: function() {
          this.counterBox = $("#counter-box");
          // Because chart is inverted, use plotWidth & plotY:
          this.counterBox.css({
            left: this.plotWidth - this.series[0].points[0].plotY + 'px'
          });
        },
        redraw: function() {
          this.counterBox.animate({
            left: this.plotWidth - this.series[0].points[0].plotY + 'px'
          });
        }
      },
      margin: [100, 20, 40, 20],
      inverted: true
    },
    ...
  });

function (chart) {
   var myInterval= setInterval(function () {
    i+=0.1;
        Highcharts.each(chart.series, function (serie) {
            var point = serie.points[0];

            if (i > 4.1) {
            clearInterval(myInterval);
                //i=-1.9
            }
            point.update(i);
        });
    }, 500);

}