在Highcharts中创建具有起点和终点的线

时间:2013-02-07 14:25:42

标签: javascript highcharts linear-regression

请看以下示例:

<script type="text/javascript">
var $j = jQuery.noConflict();

function recalculateUTCValue(startingUTC, add) {
    zeit = new Date(startingUTC);
    zeit.setDate(zeit.getDate()+add);
    return zeit;
}

function calcDateFromUTC(utc) {
    d = new Date(utc);
    return d;
}

function getDaysUntilEnd(utc) {
    var currentTime = new Date();
    var endTime = calcDateFromUTC(utc);
    var diff =  Math.floor(( Date.parse(endTime) - Date.parse(currentTime) ) / 86400000);
    return diff;
}
</script>
<script type="text/javascript">

var highchartsOptions   = Highcharts.setOptions(Highcharts.theme);
var TaskChart; // Chart-Objekt
var container = $j('#chart01')[0];

var TaskDuration          = new Array();


var startingKW = 298;
// Save starting points to javascript variables for HighCharts
var startingUTC = 1288087223364;
// For a given time point id
var startTimePoint = 0;
var endTimePoint = 0;

TaskDuration =  [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,216.0,216.0,216.0,198.0,134.0,134.0,134.0,171.0,171.0,171.0,149.0,160.5,160.5,160.5];

// Get first value which is not "0"
var firstValue = 0;
for(var i = 0; i < TaskDuration.length; i++) {
    if(TaskDuration[i] != 0) {
        firstValue = i;
        break;
    }
}

// Get largest Y-Value; need for automatically zooming (setExtremes method)
var largest = Math.max.apply(Math, TaskDuration);
var myStartDate;
var myEndDate;
// Check if we have a time point in the query
if(startTimePoint != 0) {
    var myStartDate = calcDateFromUTC(startTimePoint);
    var myEndDate = calcDateFromUTC(endTimePoint);
} else {
    // Otherwise we use the time of first created work item
    var myStartDate = recalculateUTCValue(startingUTC, firstValue); 
    var myEndDate = new Date();
}
</script>
<script type="text/javascript">
$j(document).ready(function() { 
    TaskChart = new Highcharts.Chart({
    credits: {
            enabled: false
    },
    chart: {
      renderTo: "chart01",
      defaultSeriesType: 'line',
      zoomType: 'x',
      events: {
          load: function(event) {
              this.xAxis[0].setExtremes(myStartDate, myEndDate);
              this.yAxis[0].setExtremes(0,largest);
          }
      }
    },
    title: {
      text: "Task Burn Down Chart"
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%e. %b %Y'   
        },
        labels: {
            align: 'right',
            rotation: -60,
            x: 5,
            y: 15
        },
        offset: 10
    },
    yAxis: {
      title: {
        text: "Number of Hours"
      }
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.series.name +'</b><br/>' + Highcharts.dateFormat('%d.%m', this.x) +': '+ this.y;;            
        }
    },
    plotOptions: {
        area: { 
           stacking: 'normal',
           lineColor: '#666666',
           lineWidth: 1,
           marker: {
              lineWidth: 1,
              lineColor: '#666666'
           }
        }
     },
    series: [
    {
        name: 'Hours',
        pointStart: startingUTC,
        pointInterval: 24*60*60*1000, 
        data: TaskDuration
    }, 
    { 
        type: 'line',
        name: 'Regression Line',
        data: [[myStartDate, 216], [myEndDate, 50]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        enableMouseTracking: false
    }]
  });

});
</script>

http://jsfiddle.net/JwmuT/8/

我们的目标是创建一个Highchart系列,其起点为X-Value 1月26日,结束点为X-Value 2月7日。相应的Y值是“260”和“0”。

如何在HighCharts中创建一个带有这些点的简单线?也许Highcharts能够在飞行中进行线性回归?!

我有found this demo但我不知道如何以日期格式正确传递X值。

1 个答案:

答案 0 :(得分:1)

Highcharts不会计算任何类型的回归或趋势线。在已发布的示例中,数据之前已计算,而Highcharts仅显示该数据。但是,趋势线的插件已知:https://github.com/virtualstaticvoid/highcharts_trendline