suchen

Heim >Web-Frontend >js-Tutorial >HighCharts zeichnet ein 2D-Liniendiagramm mit Beispielfreigabe für den Beschriftungseffekt

HighCharts zeichnet ein 2D-Liniendiagramm mit Beispielfreigabe für den Beschriftungseffekt

小云云
小云云Original
2018-01-23 09:34:131708Durchsuche

In diesem Artikel wird hauptsächlich das jQuery-Plug-in HighCharts zum Zeichnen eines 2D-Liniendiagramms mit Label vorgestellt. Er analysiert die spezifischen Schritte und zugehörigen Techniken des jQuery-Grafikzeichnungs-Plug-ins HighCharts, um den Liniendiagrammeffekt in Form von Beispielen zu erzielen Es enthält auch einen Demo-Quellcode, den bedürftige Leser als Referenz nutzen können. Ich hoffe, dass er allen helfen kann.

Das Beispiel in diesem Artikel beschreibt die Auswirkung des Zeichnens eines 2D-Liniendiagramms mit Label mithilfe des jQuery-Plug-Ins HighCharts. Teilen Sie es wie folgt mit allen:

1. Beispielcode: 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带Label的折线图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
  $(function(){
   $(&#39;#lineDefaultChart&#39;).highcharts({
    chart: {
     type: &#39;line&#39;
    },
    title: {
     text: &#39;(jb51.net)统计某周水果销售情况&#39;
    },
    subtitle: {
     text: &#39;水果销量&#39;
    },
    xAxis: {
     categories: [&#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;, &#39;星期日&#39;]
    },
    yAxis: {
     title: {
      text: &#39;单位(kg)&#39;
     }
    },
    tooltip: {
     enabled: true,
     formatter: function() {
      return &#39;<b>&#39;+ this.series.name +&#39;</b><br/>&#39;+
       this.x +&#39;: &#39;+ this.y +&#39;kg&#39;;
     }
    },
    legend: {
     layout: &#39;vertical&#39;,
     align: &#39;bottom&#39;,
     verticalAlign: &#39;bottom&#39;,
     borderWidth: 10
    },
    series: [{
     name: &#39;苹果&#39;,
     data: [98,25,69,45,15,78,67]
    }, {
     name: &#39;橘子&#39;,
     data: [46,78,16,85,67,24,17]
    }, {
     name: &#39;桃子&#39;,
     data: [19,54,74,18,34,90,34]
    }, {
     name: &#39;梨子&#39;,
     data: [63,52,90,65,47,34,97]
    }, {
     name: &#39;荔枝&#39;,
     data: [56,74,99,41,43,65,78]
    }]
   });
  });
</script>
</head>
<body>
 <p id="lineDefaultChart" style="width: 1200px; height: 500px; margin: 0 auto"></p>
</body>
</html>

2 >

Verwandte Empfehlungen:

HighCharts zeichnet 2D-Donut-Diagrammeffekt-Beispielfreigabe

HighCharts zeichnet 2D mit Legenden-Kreisdiagrammeffekt Beispielfreigabe

jQuery-Plug-in HighCharts-Zeichnung 2D-Kreisdiagrammeffekt Beispielfreigabe

Das obige ist der detaillierte Inhalt vonHighCharts zeichnet ein 2D-Liniendiagramm mit Beispielfreigabe für den Beschriftungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die gemeinsame Nutzung von JQuery, das den Zeit-/Datumsauswahleffekt von Apple imitiertNächster Artikel：Beispiel für die gemeinsame Nutzung von JQuery, das den Zeit-/Datumsauswahleffekt von Apple imitiert

In Verbindung stehende Artikel

Mehr sehen