Как добавить линию наилучшего соответствия (линию тренда) на график рассеяния в CanvasJS? - PullRequest
Новая
       78

Как добавить линию наилучшего соответствия (линию тренда) на график рассеяния в CanvasJS?

2 голосов
/ 31 октября 2019

У меня есть точечная диаграмма, которая содержит много данных, слишком много для отображения пользователю. Я хотел бы добавить линию наилучшего соответствия или «линию тренда» на график, чтобы показать тренд и сделать графики рассеяния невидимыми. Мои данные хранятся во внешнем файле JSON в формате: 

{
    "X" : [1,2,3,4,5,6,7,8,9...],
    "Y" : [1,2,3,4,5,6,7,8,9...]
}

И я отображаю свои данные, используя этот код: 

function addData(data){
  console.log("Adding data");
  var gradeMaxLength = 0; 

  for( var i = 0; i < data.length; i++ ){
    if( gradeMaxLength < data[i].grade.length ){
      gradeMaxLength = data[i].grade.length;
    }
  }

  // addding datSeries
  for( var j = 0; j < gradeMaxLength; j++ ){
    chart.options.data.push({
      type:"scatter",
      dataPoints:[]
    });
  }

  // adding dataPoints
  for( var k = 0; k < data.length; k++ ){
    for( var l = 0; l < gradeMaxLength; l++ ){
      chart.options.data[l].dataPoints.push({
        x: data[k].present[l],
        y: data[k].grade[l]
      }
    );
  }
}
chart.render();
}

Есть ли способ добавить строкулучше всего подходит для моего графика, из которых я включил фотографию ниже?

Graph

1 Ответ

2 голосов
/ 31 октября 2019

Для canvasJS вы можете использовать этот кусок кода. Я использую его для себя некоторое время, но он отлично работает!

Добавьте это после вашего chart.render (); 

    calculateTrendLine(chart);
    function calculateTrendLine(chart){
        var a, b, c, d, e, slope, yIntercept;
        var xSum = 0, ySum = 0, xySum = 0, xSquare = 0, dpsLength = chart.data[0].dataPoints.length;
        for(var i = 0; i < dpsLength; i++)
            xySum += (chart.data[0].dataPoints[i].x * chart.data[0].dataPoints[i].y)
        a = xySum * dpsLength;

        for(var i = 0; i < dpsLength; i++){
            xSum += chart.data[0].dataPoints[i].x;
            ySum += chart.data[0].dataPoints[i].y;
        }
        b = xSum * ySum;

        for(var i = 0; i < dpsLength; i++)
            xSquare += Math.pow(chart.data[0].dataPoints[i].x, 2);
        c = dpsLength * xSquare;

        d = Math.pow(xSum, 2);
        slope = (a-b)/(c-d);
        e = slope * xSum;
        yIntercept = (ySum - e) / dpsLength;

        var startPoint = getTrendLinePoint(chart.data[0].dataPoints[0].x, slope, yIntercept);
        var endPoint = getTrendLinePoint(chart.data[0].dataPoints[dpsLength-1].x, slope, yIntercept);

        chart.addTo("data",{
            type: "line", //Line series showing trend
            markerSize: 0,
            dataPoints: [startPoint, endPoint]
        });
    }

    function getTrendLinePoint(x, slope, intercept){
        return {x: x, y: ((slope * x) + intercept)};
    }
...