Home >Web Front-end >JS Tutorial >HighCharts drawing 2D line chart with Label effect example sharing

HighCharts drawing 2D line chart with Label effect example sharing

小云云Original: 2018-01-23 09:34:131707browse

This article mainly introduces the jQuery plug-in HighCharts to draw a 2D line chart with Label. It analyzes the specific operation steps and related techniques of the jQuery graphics drawing plug-in HighCharts to achieve the line chart effect in the form of examples. It also comes with demo source code for readers to download for reference. Friends in need can refer to it, I hope it can help everyone.

The example in this article describes the effect of jQuery plug-in HighCharts drawing 2D line chart with Label. Share it with everyone for your reference, the details are as follows:

1. Sample code:

<!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. Operation rendering:

Related recommendations:

HighCharts draws 2D donut chart effect example sharing

HighCharts draws 2D pie chart with Legend Effect example sharing

jQuery plug-in HighCharts drawing 2D pie chart effect example sharing

The above is the detailed content of HighCharts drawing 2D line chart with Label effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example sharing of jquery imitating Apple’s time/date selection effectNext article：Example sharing of jquery imitating Apple’s time/date selection effect

See more

HighCharts drawing 2D line chart with Label effect example sharing

Related articles