highcharts多坐标轴混合图

//---------------------------在线damo01-----------------------------------
var chart = Highcharts.chart('container', {chart: {//zoomType: 'xy' //缩放控制},title: {text: '东京月平均天气数据'},subtitle: {text: ''},xAxis: [{categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],crosshair: true}],yAxis: [{reversed: true,//反转max:'2500',min:'0',labels: {format: '{value}°1',style: {color: Highcharts.getOptions().colors[2]}},title: {text: '',style: {color: Highcharts.getOptions().colors[2]}},opposite: true}, { // Secondary yAxisreversed: true,//反转max:'2500',min:'0',labels: {enabled:true,format: '{value}°2',style: {color: Highcharts.getOptions().colors[3]}},title: {text: '',style: {color: Highcharts.getOptions().colors[3]}},opposite: true}, { // Secondary yAxismax:'2500',min:'0',reversed: true,//反转gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[0]}},labels: {format: '{value} °3',style: {color: Highcharts.getOptions().colors[0]}}}, { max:'2500',min:'0',gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[4]}},labels: {enabled:true,format: '{value} °4',style: {color: Highcharts.getOptions().colors[4]}},opposite: true}, {max:'2500',min:'0',   gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[1]}},labels: {enabled:true,format: '{value} °5',style: {color: Highcharts.getOptions().colors[1]}},opposite: true}, {max:'2500',min:'0',    gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[1]}},labels: {enabled:true,format: '{value} °6',style: {color: Highcharts.getOptions().colors[1]}},opposite: true}],tooltip: {shared: true},legend: {layout: 'vertical',align: 'right',x: 0,verticalAlign: 'top',y: 155,//floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'}, series: [{name: '海平面气压1',type: 'column',yAxis: 2,data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}, {name: '海平面气压2',type: 'column',yAxis: 3,data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}, {name: '海平面气压3',type: 'spline',yAxis: 3,data: [716, 916, 1315.9, 1015.5, 812.3, 409.5, 809.6, 810.2, 1013.1, 1416.9, 1018.2,816.7],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}, {name: '海平面气压4',type: 'column',yAxis: 2,data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}, {name: '海平面气压5',type: 'column',yAxis: 3,data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}, {name: '海平面气压6',type: 'spline',yAxis: 3,data: [996, 315.9, 615.5, 912.3, 1009.5, 409.6, 510.2, 1013.1, 816.9, 718.2, 816.7,819],marker: {enabled: false},dashStyle: 'shortdot',tooltip: {valueSuffix: ' mb'}}]
});

显示效果：

//根据删除坐标所示可以将坐标轴与数据列进行动态关联，继而进行demo01改造
$(function () {var chart = Highcharts.chart('container', {xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},yAxis: {title: {text: 'Temperature'},lineWidth: 2,lineColor: '#F33',id: 'temperature-axis'},series: [{name: 'Temperature',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],color: '#F33'}]});// the button handlera$('#add').click(function () {chart.addAxis({ // Secondary yAxisid: 'rainfall-axiss',title: {text: 'Rainfall'},lineWidth: 2,lineColor: '#08F',reversed: true,//反转opposite: true});chart.addSeries({name: 'Rainfall',type: 'column',color: '#08F',yAxis: 'rainfall-axiss',data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]});chart.addSeries({name: 'Rainfall',type: 'column',color: '#08F',yAxis: 'rainfall-axiss',data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9]});$(this).attr('disabled', true);$('#remove').attr('disabled', false);});$('#remove').click(function () {chart.get('rainfall-axiss').remove();  // =  chart.yAxis[0].remove();$(this).attr('disabled', true);$('#add').attr('disabled', false);});
});

显示效果：

最终理想目标是隐藏其中重复坐标轴，显示6个数据项，图例为一正序，一反向，后来发现自己Ctrl+C、Ctrl+V 没有理解全api

// Highcharts 使用yAxis: 1, 可以直接绑定坐标轴。汗！！！！！！！
var chart = Highcharts.chart('container', {chart: {zoomType: 'xy'},title: {text: '东京月平均温度和降雨量'},subtitle: {text: '数据来源: WorldClimate.com'},xAxis: [{categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],crosshair: true}],yAxis: [{ // Primary yAxismax:'60',labels: {format: '{value}°C',style: {color: Highcharts.getOptions().colors[1]}},title: {text: '温度',style: {color: Highcharts.getOptions().colors[1]}}}, { // Secondary yAxismax:'500',title: {text: '降雨量',style: {color: Highcharts.getOptions().colors[0]}},reversed: true,//反转labels: {format: '{value} mm',style: {color: Highcharts.getOptions().colors[0]}},opposite: true}],tooltip: {shared: true},legend: {layout: 'vertical',align: 'right',x: 0,verticalAlign: 'top',y: 100,//floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'},series: [{name: '降雨量1',type: 'column',yAxis: 1,data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],tooltip: {valueSuffix: ' mm'}}, {name: '降雨量2',type: 'column',yAxis: 1,data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9],tooltip: {valueSuffix: ' mm'}}, {name: '降雨量3',type: 'spline',yAxis: 1,data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9,71.5],tooltip: {valueSuffix: '°C'}}, {name: '温度1',type: 'spline',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],tooltip: {valueSuffix: '°C'}}, {name: '温度2',type: 'column',data: [6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,7.0],tooltip: {valueSuffix: '°C'}}, {name: '温度3',type: 'column',data: [ 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,7.0,6.9],tooltip: {valueSuffix: '°C'}}]
});

highcharts多坐标轴混合图相关推荐

plotly可视化绘制混合图
plotly可视化绘制混合图 # 混合图多种可视化形式融合在一个图形中: from plotly.graph_objs import * import plotly as py import plot ...
今日 Paper | 社交媒体谣言检测；连续手语识别；细粒度服装相似性学习；混合图神经网络等
2020-02-18 15:43 目录基于双向图卷积神经网络的社交媒体上谣言检测用于连续手语识别的时空多线索网络基于属性特定嵌入网络的细粒度服装相似性学习混合图神经网络在人群计数中的应用 ...
poj 1637(混合图求欧拉回路)
参考博客:http://www.cnblogs.com/destinydesigner/archive/2009/09/28/1575674.html 1 定义欧拉通路 (Euler tour)-- ...
混合图 (Standard IO)
Description 有一张N个点,M1条有向边,M2条无向边组成的混合图.询问一个给所有无向边定向的方案.使得最终的图中没有环.保证一定有解. Input 第一行,三个数字N,M1,M2. 接下来 ...
混合图的欧拉路径和欧拉回路判断
混合图(既有有向边又有无向边的图)中欧拉环.欧拉路径的判定需要借助网络流!(1)欧拉环的判定: 一开始当然是判断原图的基图是否连通,若不连通则一定不存在欧拉环或欧拉路径(不考虑度数为0的点).其实,难 ...
python dll 混合_Python | 条线混合图
python dll 混合 In some of the cases, we need to plot a bar-line hybrid plot. This plot helps in a bet ...
POJ 1637 混合图的欧拉回路 + Dinic
题意传送门 POJ 1637 题解有向图存在欧拉回路的充要条件: 所有顶点入度等于出度,且图为连通图. 混合图存在欧拉回路的判断的基本思路: 混合图 G(V,E)G(V,E)G(V,E) 通过假设 ...
poj1637（混合图判欧拉回路）
把该图的无向边随便定向,计算每个点的入度和出度.如果有某个点出入度之差为奇数,那么肯定不存在欧拉回路.因为欧拉回路要求每点入度 = 出度, 也就是总度数为偶数,存在奇数度点必不能有欧拉回路. 好了 ...
POJ 1637 混合图的欧拉回路判定
题意:一张混合图,判断是否存在欧拉回路. 分析参考: 混合图(既有有向边又有无向边的图)中欧拉环.欧拉路径的判定需要借助网络流! (1)欧拉环的判定: 一开始当然是判断原图的基图是否连通,若不连通则一 ...
欧拉回路（混合图的欧拉回路）
/* ID: linjd821 LANG: C++ TASK: sightseeing */ //zju 1992 //混合图的欧拉回路,用网络流调整无向边 /* //转自某位牛人blog 混合图欧拉 ...

highcharts多坐标轴混合图

highcharts多坐标轴混合图相关推荐

最新文章

热门文章