Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

Highcharts 丢失值区域图

chart 配置

将 chart 的 spacingBottom 属性设置为 30。表示图表间的间隔区间。

var chart = {
   type: ‘area‘,
   spacingBottom: 30
};

实例

文件名：highcharts_area_missing.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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 chart = {
      type: ‘area‘,
      spacingBottom: 30
   };
   var title = {
      text: ‘Fruit consumption *‘
   };
   var subtitle = {
      text: ‘* Jane\‘s banana consumption is unknown‘,
      floating: true,
      align: ‘right‘,
      verticalAlign: ‘bottom‘,
      y: 15
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Apples‘, ‘Pears‘, ‘Oranges‘, ‘Bananas‘, ‘Grapes‘, ‘Plums‘, ‘Strawberries‘, ‘Raspberries‘]
   };
   var yAxis = {
      title: {
         text: ‘Y-Axis‘
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      }
   };
   var tooltip = {
      formatter: function () {
         return ‘<b>‘ + this.series.name + ‘</b><br/>‘ +
            this.x + ‘: ‘ + this.y;
      }
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: ‘John‘,
            data: [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            name: ‘Jane‘,
            data: [1, 0, 3, null, 3, 1, 2, 1]
      }
   ];     

   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);});</script></body></html>

尝试一下 ?

以上实例输出结果为：

Highcharts 反转x轴与y轴

chart 配置

将 chart 的 inverted 属性设置为 true，X轴为垂直，Y轴为水平的。

var chart = {
   type: ‘area‘,
   inverted: true
};

实例

文件名：highcharts_area_inverted.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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 chart = {
      type: ‘area‘,
     inverted: true
   };
   var title = {
      text: ‘Average fruit consumption during one week‘
   };
   var subtitle = {
      style: {
         position: ‘absolute‘,
         right: ‘0px‘,
         bottom: ‘10px‘
      }
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: -150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Monday‘,‘Tuesday‘,‘Wednesday‘,‘Thursday‘,‘Friday‘,‘Saturday‘,‘Sunday‘]
   };
   var yAxis = {
      title: {
         text: ‘Number of units‘
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      },
     min: 0
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: ‘John‘,
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: ‘Jane‘,
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     

   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);

});
</script>
</body>
</html>

尝试一下 ?

以上实例输出结果为：

Highcharts 曲线区域图

chart 配置

将 chart 的 type 属性设置为 areaspline，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘areaspline‘
};

实例

文件名：highcharts_area_spline.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.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 chart = {
      type: ‘areaspline‘
   };
   var title = {
      text: ‘Average fruit consumption during one week‘
   };
   var subtitle = {
      style: {
         position: ‘absolute‘,
         right: ‘0px‘,
         bottom: ‘10px‘
      }
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Monday‘,‘Tuesday‘,‘Wednesday‘,‘Thursday‘,‘Friday‘,‘Saturday‘,‘Sunday‘]
   };
   var yAxis = {
      title: {
         text: ‘Fruit units‘
      }
   };
   var tooltip = {
       shared: true,
       valueSuffix: ‘ units‘
   };
   var credits = {
       enabled: false
   }
   var plotOptions = {
      areaspline: {
         fillOpacity: 0.5
      }
   };
   var series= [{
        name: ‘John‘,
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: ‘Jane‘,
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     

   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);

});
</script>
</body>
</html>

尝试一下 ?

以上实例输出结果为：

Highcharts 区间区域图

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘arearange‘
};

实例

文件名：highcharts_area_range.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.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>
   <script src="http://code.highcharts.com/highcharts-more.js"></script>
   <script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var chart = {
      type: ‘arearange‘,
      zoomType: ‘x‘
   };
   var title = {
      text: ‘Temperature variation by day‘
   };
   var xAxis = {
      type: ‘datetime‘
   };
   var yAxis = {
      title: {
         text: null
      }
   };
   var tooltip = {
       shared: true,
     crosshairs: true,
       valueSuffix: ‘\xB0C‘
   };
   var legend = {
       enabled: false
   }    

   var json = {};
   json.chart = chart;
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;     

   $.getJSON(‘http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?‘, function (data) {
      var series= [{
         name: ‘Temperatures‘,
         data: data
         }
      ];
    json.series = series;
    $(‘#container‘).highcharts(json);
   });
});
</script>
</body>
</html>

尝试一下 ?

以上实例输出结果为：

Highcharts 使用区间和线的区域图

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘arearange‘
};

实例

文件名：highcharts_area_rangeline.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.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>
   <script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
    var ranges = [
      [1246406400000, 14.3, 27.7],
      [1246492800000, 14.5, 27.8],
      [1246579200000, 15.5, 29.6],
      [1246665600000, 16.7, 30.7],
      [1246752000000, 16.5, 25.0],
      [1246838400000, 17.8, 25.7],
      [1246924800000, 13.5, 24.8],
      [1247011200000, 10.5, 21.4],
      [1247097600000, 9.2, 23.8],
      [1247184000000, 11.6, 21.8],
      [1247270400000, 10.7, 23.7],
      [1247356800000, 11.0, 23.3],
      [1247443200000, 11.6, 23.7],
      [1247529600000, 11.8, 20.7],
      [1247616000000, 12.6, 22.4],
      [1247702400000, 13.6, 19.6],
      [1247788800000, 11.4, 22.6],
      [1247875200000, 13.2, 25.0],
      [1247961600000, 14.2, 21.6],
      [1248048000000, 13.1, 17.1],
      [1248134400000, 12.2, 15.5],
      [1248220800000, 12.0, 20.8],
      [1248307200000, 12.0, 17.1],
      [1248393600000, 12.7, 18.3],
      [1248480000000, 12.4, 19.4],
      [1248566400000, 12.6, 19.9],
      [1248652800000, 11.9, 20.2],
      [1248739200000, 11.0, 19.3],
      [1248825600000, 10.8, 17.8],
      [1248912000000, 11.8, 18.5],
      [1248998400000, 10.8, 16.1]
   ];
   var averages = [
      [1246406400000, 21.5],
      [1246492800000, 22.1],
      [1246579200000, 23],
      [1246665600000, 23.8],
      [1246752000000, 21.4],
      [1246838400000, 21.3],
      [1246924800000, 18.3],
      [1247011200000, 15.4],
      [1247097600000, 16.4],
      [1247184000000, 17.7],
      [1247270400000, 17.5],
      [1247356800000, 17.6],
      [1247443200000, 17.7],
      [1247529600000, 16.8],[1247616000000,17.7],[1247702400000,16.3],[1247788800000,17.8],[1247875200000,18.1],[1247961600000,17.2],[1248048000000,14.4],[1248134400000,13.7],[1248220800000,15.7],[1248307200000,14.6],[1248393600000,15.3],[1248480000000,15.3],[1248566400000,15.8],[1248652800000,15.2],[1248739200000,14.8],[1248825600000,14.4],[1248912000000,15],[1248998400000,13.6]];var title ={
      text:‘July temperatures‘};var xAxis ={
      type:‘datetime‘};var yAxis ={
      title:{
         text:null}};var tooltip ={
       shared:true,
      crosshairs:true,
       valueSuffix:‘\xB0C‘};var legend ={}var series=[{
        name:‘Temperature‘,
            data: averages,
            zIndex:1,
            marker:{
                fillColor:‘white‘,
                lineWidth:2,
                lineColor:Highcharts.getOptions().colors[0]}},{
            name:‘Range‘,
            data: ranges,
            type:‘arearange‘,
            lineWidth:0,
            linkedTo:‘:previous‘,
            color:Highcharts.getOptions().colors[0],
            fillOpacity:0.3,
            zIndex:0}];var json ={};
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
   $(‘#container‘).highcharts(json);});</script></body></html>

尝试一下 ?

以上实例输出结果为：

时间： 2024-08-15 07:50:21

Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图的相关文章

highcharts去掉x轴，y轴，轴线以及刻度

var chart = null; $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) { chart = Highcharts.chart('container', { chart: { zoomType: 'x' }, title: { text: '美元兑欧元汇率走势图' }, subtitle: { text: document.ontou

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

使用HighCharts描绘多个Y轴的动态曲线。

调试了一整天,终于显示出来了. 详细例子参照官网的demo:http://www.hcharts.cn/demo/index.php 在这只贴出关键部分的JS代码 1. chart (就是在events的load里写一个实时获取的方法.通过json调用去后台拉新数据加到series里) 1 chart: { 2 renderTo: 'chart_spline', //图表放置的容器,DIV 3 defaultSeriesType: 'spline', //图表类型为曲线图 4 events: {

Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚的,主要是设置这段代码,max(设置y轴最大值)和splitNumber 总结一下公式就是, max/ splitNumber=y轴值间隔 (比如将y轴200平均成5个点,每个点的间距就是40) yAxis : [ { // 纵轴标尺固定 type : 'value', scale : true,

echart折线堆叠图 Y轴数据不堆叠

<!DOCTYPE html> <html> <head></head> <body>     <div class="row form-inline form-ranking">     <div class="form-group">         <label class="control-label">店铺:</label>   

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

[办公应用]如何制作二Y轴图（excel）

有时候我们会遇到一种图表,就是X轴一致,可是Y轴的数据相差很大.如下图中,年龄和收入就不是一个数量级,在图表中显示的时候,“年龄”的曲线根本看不到(表中数据仅供举例): 解决的方法就是使用双Y轴显示,把年龄的数据可以显示到另一边.步骤如下: 1.在图表工具条中选中数据值较小的那个系列.本例中的"年龄". 2.在图中的系列(下图中的四个小黑方框上面)上,单击右键.选择“数据系列格式”. 3.选择“数据系列格式”后,在如下图页面,选择“次坐标轴”.o(∩_∩)o…确定,看到结果了吗? 4.

Android 自定义绘制折线图（重点是Y轴的公式）

/** * 绘制折线图的公式Y轴坐标: y=height-((data-min)/(max-min))*height; 可以得到data在Y轴的坐标点 * height: 折线图 Y轴的坐标 * data: 数据源 * max: 数据源的最大值 * min: 数据源的最小值 * * */ /** * 绘制折线图: y轴左侧的数据 * * 1.根据需求 :显示几个数据 height/显示个数(平均分配Y轴) * 2.左侧数据: Y轴的顶部:数据源max值 Y轴的底部:数据源的min值 中间数据:取

【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等）

这是最近一个iOS项目需要使用的K线的绘制,在网上大量查阅资料无果,只好自行绘制. 实时数据使用来源API: https://www.btc123.com/kline/klineapi 返回数据说明: 1.时间戳 2.开盘价 3.最高价 4.最低价 5.收盘价 6.成交量 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://github.com/yate1996/Y_KLine,如果帮到了你,麻烦