Latest web development tutorials

Highcharts Scatterplot auf der Regressionsgeraden

Highcharts Chart-Kombination Highcharts Chart - Kombination

Das folgende Beispiel zeigt die Regressionslinie auf dem Streudiagramm.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen.

Konfiguration

Reihenkonfiguration

Das type-Attribut gesetzt Serie line / Streuung, series.type Spalte beschreibt den Datentyp. Der Standardwert ist "Linie". 

var series = {
   type: 'scatter'
};

Beispiele

Dateiname: highcharts_combinations_scatter.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var title = {
      text: '散点图上添加回归线'   
   };
   var xAxis = {
      min: -0.5,
      max: 5.5
   };
   var yAxis= {
      min: 0
   };
   var series= [{
            type: 'line',
            name: '回归线',
            data: [[0, 1.11], [5, 4.51]],
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        }, {
            type: 'scatter',
            name: '观察点',
            data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
            marker: {
                radius: 4
            }
        }
   ];     
      
   var json = {};   
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.series = series;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Das obige Beispiel Ausgabe lautet:

Highcharts Chart-Kombination Highcharts Chart - Kombination