与highcharts对抗

时间：2018-02-04 14:35:53

标签： javascript jquery highcharts counter

我正在制作自定义线性测量图

JSFiddle 

$(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）。希望可以在公式中处理先前的那些。

如果上述内容太难，可能会使用this计数器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);}

也许这个问题太多了，但它会使图表完整。再次感谢所有的努力，我非常感谢

2 个答案:

答案 0 :(得分：1)

Image

根据您的评论，您可以在第4.1点之后使用clearInterval删除setInterval 

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

}

Fiddle演示

$(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);
  var i = -1.9;
  $('#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.9],
        color: '#000000',
        dataLabels: {
          enabled: true,
          color: '#000000',
          align: 'center',
          format: '{point.y:,.1f}%',
          y: 70,
        }
      }]

    }, // Add some life

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

    });
});
#container {
    width: 600px;
    height: 200px;
    margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

答案 1 :(得分：0)

Highcharts不会为文本内容设置动画，只会立即更改它。我建议在图表顶部创建溢出元素，内部使用反插件，然后仅在元素的左侧位置设置动画。

像这样：http://jsfiddle.net/BlackLabel/rpnem4np/3/

HTML：

    align-items:flex-start;

CSS：

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

JS：

#counter-box {
  position: absolute;
  z-index: 2;
  top: 80px;
  left: 110px;
}
相关问题
最新问题