Highcharts - показать процентное различие между точками данных в серии

Question

У меня есть ряд чисел, которые я нанес на линейной диаграмме. То, что я хотел бы сделать, - показать процентную разницу между каждой последующей точкой данных в серии на линии, построенной между каждой точкой. Таким образом, мои данные выглядит примерно так:

[10,15,20,25,30,35]

На линии между каждой точкой я хочу показать разницу в процентах, от 10 до 15, или 50% , например. Или от 20 до 25 (25%).

Есть ли способ сделать это?

Answer 1

Одним из решений было бы вычислить ряды и переопределить dataLabels для этой серии:

$(function() { 
    var data = [10,15,20,25,30,35]; // original data 
    var data2 = []; // calculated series 
    var perDiff; // percent difference 
    for (var i=0;i<data.length-1;i++) { 
     // calculate the % diff, we're going to use this as the point name 
     perDiff = (data[i+1] - data[i])/data[i] * 100; 
     data2.push({ 
      // this is assuming a category xAxis, if your original array has x & y values, you'll need to do a little more math 
      x : i + 0.5, 
      // find the half way mark 
      y : (data[i] + data[i+1]) /2, 
      // set the name, so we can use it in the dataLabel formatter 
      name : Math.round(perDiff) + "%" 
     }); 
    } 
    $('#container').highcharts({ 
     chart: { 
      type: 'line' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: [{ 
      title: { 
       text: 'Primary Axis' 
      }, 
      gridLineWidth: 0 
     }], 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 
     }, 
     series: [{ 
      data: data, 
      dataLabels : { 
       enabled: true 
      } 
     }, { 
      name: 'Percent Difference', 
      data: data2, 
      type: 'scatter', 
      color: 'grey', 
      dataLabels: { 
       enabled: true, 
       color: 'grey', 
       formatter : function() { 
        return this.point.name; 
       } 
      } 

     }] 
    }); 
}); 

http://jsfiddle.net/blaird/xx84fwkp/1/