本章节我们将为大家介绍 Highcharts 的热点图。
我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。
设置 series 的 type 属性为 treemap ，series.type 描述了数据列类型。默认值为 "line"。
var chart = {
type: 'treemap'
};
文件名：highcharts_tree_map.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>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Highcharts Treemap'
};
var colorAxis = {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
};
var series= [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}, {
name: 'D',
value: 3,
colorValue: 4
}, {
name: 'E',
value: 2,
colorValue: 5
}, {
name: 'F',
value: 2,
colorValue: 6
}, {
name: 'G',
value: 1,
colorValue: 7
}]
}];
var json = {};
json.title = title;
json.colorAxis = colorAxis;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
以下实例使用不同颜色来标识不同等级的树状图。
文件名：highcharts_tree_levels.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>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Fruit consumption'
};
var series = [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id:'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}];
var json = {};
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
以下实例颜色了大数据量的树状图，具体实例数据可通过点击"尝试一下"查看。
文件名：highcharts_tree_largemap.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>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
//省略部分 js 代码
var data = {……};
var points = [],
region_p,
region_val,
region_i,
country_p,
country_i,
cause_p,
cause_i,
cause_name = [];
cause_name['Communicable & other Group I'] = 'Communicable diseases';
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
cause_name['Injuries'] = 'Injuries';
region_i = 0;
for (var region in data) {
region_val = 0;
region_p = {
id: "id_" + region_i,
name: region,
color: Highcharts.getOptions().colors[region_i]
};
country_i = 0;
for (var country in data[region]) {
country_p = {
id: region_p.id + "_" + country_i,
name: country,
parent: region_p.id
};
points.push(country_p);
cause_i = 0;
for (var cause in data[region][country]) {
cause_p = {
id: country_p.id + "_" + cause_i,
name: cause_name[cause],
parent: country_p.id,
value: Math.round(+data[region][country][cause])
};
region_val += cause_p.value;
points.push(cause_p);
cause_i++;
}
country_i++;
}
region_p.value = Math.round(region_val / country_i);
points.push(region_p);
region_i++;
}
var chart = {
renderTo: 'container'
};
var title = {
text: 'Global Mortality Rate 2012, per 100 000 population'
};
var subtitle: {
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
};
var series = [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}];
var json = {};
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
我想创建一个介于散列和树之间的“Config”类。它只是用于存储全局值，可以有一个上下文。下面是我的使用方法:Config.get("root.parent.child_b")#=>"value"类可能如下所示:classConstructdefget(path)#splitpathby"."#searchtreefornodesenddefset(key,value)#splitpathby"."#createtreenodeifnecessary#settreevalueenddeftree{:root=>{:parent=>{:child_a=>"value",:child_b=
我正在尝试显示数据标签。但DATALABEL未显示黑条。为什么？http://jsfiddle.net/o4pt855e/其他栏显示良好。我借此机会问我如何提出条件？。如果值小于5，则DATALABEL显示在左侧，否则显示在右侧。$(function(){$('#container').highcharts({chart:{type:'bar'},title:{text:'MiEPS'},xAxis:{//categories:["number1","number2","number3","number4","number5"],title:{text:null},labels:{//
我有下面的图表，其中有两条线http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/series:[{name:'Tokyo',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]},{name:'London',data:[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]
如何使用highchartsrangeselector获得有效的jQuery日期选择器？这个fiddle是一个有问题的旧例子(来自highcharts作者)。http://jsfiddle.net/BWEm5/更改结束日期会将开始日期重置为数据的开头。$(function(){$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?',function(data){//Createthechartwindow.chart=newHighcharts.StockC
我正在使用自定义可视化组件和Highcharts在JaspersoftStudio6.4中开发一份报告。长话短说，在绘制气泡图或面积图时，plotOptions.fillColor-attribute无法正常工作，但会使气泡内部或堆积面积图的内部变黑。黑色通常表示未找到颜色，但面积图中的气泡线/线可以正常工作。下面是面积图的Highcharts脚本:define(['jquery_hc','hchart'],function($,Highcharts){ returnfunction(instanceData){ //Creatingthechart varconfig={chart
我需要我的yAxis类别为0=“差”、0.25=“低于平均水平”、0.75=“平均水平”1="好"我正确设置了类别，但Highcharts似乎将我绘制的每个点解释为等于y轴上的“1”步。参见http://jsfiddle.net/54cFG/理想情况下，该图表应始终在y轴上显示4个标签，并且标绘点应在“低于平均水平”和“平均水平”处对齐。是否有我缺少的设置？我想我在http://www.highcharts.com/ref/几乎尝试了一切 最佳答案 您始终可以使用绘图带在Y轴上显示类别。这样你仍然可以保留实际值。我已经用你的代码证明
这是我正在使用的:http://jsfiddle.net/josip0423/prJjY/171/在过去的几个小时里，我一直在努力解决这个问题，但一无所获。我是javascript的新手，今天才发现highcharts。默认情况下，堆栈标签显示两个系列的总数(this.total)。我想要做的是显示其中一个系列的百分比(“完整”系列的值/this.total*100)。我不知道如何提取“完整”系列的值。yAxis:{stackLabels:{style:{color:'black'},enabled:true,formatter:function(){**returnthis.tota
在下面的HighCharts示例中，系列A和B具有相同的数据。只有B的线在图表绘图区域中可见，因为它直接绘制在A上。终端用户不可能知道A在B后面。我们可以在配置对象中设置tooltip.shared=true以在悬停在任何系列上时显示给定x轴点的所有数据值。但是，在我的真实示例中，我在图表上绘制了多达50个系列，这是不合适的。是否可以保持tooltip.shared=false的行为，但是当用户将鼠标悬停在与一个或多个系列重叠的系列上时，显示所有(且仅)工具提示中的重叠系列值？或者是否有任何其他用户友好的方式来指示在给定的x值处有2个以上相同的y值？http://jsfiddle.ne
下图是用D3.js生成的。基于代码here:FlareDendrogram.nodecircle{fill:#fff;stroke:steelblue;stroke-width:1.5px;}.node{font:10pxsans-serif;}.link{fill:none;stroke:#ccc;stroke-width:1.5px;}varradius=960/2;varcluster=d3.layout.cluster().size([360,radius-120]);vardiagonal=d3.svg.diagonal.radial().projection(functio
我正在使用以下逻辑创建一个highcharts图表系列:this.series=[];for(variinheaderData){varheader=headerData[i];this.series.push({name:header.name,data:[],yAxis:parseInt(header.axis),id:header.id,type:'column',zIndex:1,events:{mouseOver:function(e){console.log('Point:',e.point);}}});}我read该点是事件e的属性，但在我的例子中e.point是unde