higcharts简单运用

最新推荐文章于 2024-07-04 00:59:27 发布

错别字殿下

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量334

点赞数 1

分类专栏：控件图形文章标签： javascript

本文链接：https://blog.csdn.net/u010311609/article/details/48785551

版权

控件图形专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最新项目里需要用则线图来显示数据，于是在echarts 和 higcharts 之间我选着了higcharts。线面是higcharts 官网api地址：http://www.hcharts.cn/api/

我主要是运用的是折线图。

首先，需要引用就是higcharts的js文件。

其次，个该部分米默认效果

1.去掉负值：

                yAxis: {
                   min:0,//不显示负数
                   plotLines: [{
                       value: 0,
                       width: 1,
                       color: '#808080'
                   }]
               },

2.将k 转成000：

               yAxis: {
                   title: {
                       text: ''
                   },
                   labels: {//不显示k值
                       formatter: function() {
                           return this.value ;
                       }
                   },
                   min:0,//不显示负数
                   plotLines: [{
                       value: 0,
                       width: 1,
                       color: '#808080'
                   }]
               },

3.图显示成：

4.颜色在js里进行修改。

5.附送例子和页面代码一份。

<!DOCTYPE HTML>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>Highcharts Example</title>

       <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
       <style type="text/css">
       ${demo.css}
       </style>
   <script type="text/javascript">
       $(function () {
           $('#container').highcharts({
               title: {
                   text: '',
               },
               subtitle: {
                   text: '',
               },
               xAxis: {
                   categories: ['2004', '2005', '2006', '2007', '2008', '2009',
                       '2010', '2011', '2012', '2013', '2014', '2015']
               },
               yAxis: {
                   title: {
                       text: ''
                   },
                   labels: {//不显示k值
                       formatter: function() {
                           return this.value ;
                       }
                   },
                   min:0,//不显示负数
                   plotLines: [{
                       value: 0,
                       width: 1,
                       color: '#808080'
                   }]
               },
               tooltip: {
                   valueSuffix: '元'
               },
               legend: {
                   layout: 'vertical',
                   align: 'center',
                   verticalAlign: 'top',
                   display:'none',
                   borderWidth: 0
               },
               series: [{
                   name: '价格走势',
                   data: [7800, 7000, 9000, 7000, 7000, 7000, 6000, 5000, 7000, 7000, 7000, 5000]
               }]
           });
       });
       </script>
   </head>
<body>
<script src="highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>

错别字殿下

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
higcharts简单运用

最新项目里需要用则线图来显示数据，于是在echarts 和 higcharts 之间我选着了higcharts。线面是higcharts 官网api地址：http://www.hcharts.cn/api/我主要是运用的是折线图。首先，需要引用就是higcharts的js文件。其次，个该部分米默认效果1.去掉负值： y
复制链接

扫一扫