本章节我们将为大家介绍 Highcharts 的气泡图。
我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。
配置 chart 的 type 为 'bubble' 。chart.type 描述了图表类型。默认值为 "line"。
chart.zoomType 属性可配置图表放大 ，通过拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy'。
var chart = {
type: 'bubble',
zoomType: 'xy'
};
文件名：highcharts_bubble_basic.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/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 chart = {
type: 'bubble',
zoomType: 'xy'
};
var title = {
text: 'Highcharts Bubbles'
};
var series= [{
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
}, {
data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
}, {
data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
设置 series.marker 渐变让其看起来有 3D 的效果。
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
文件名：highcharts_bubble_3d.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="/try/demo_source/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 chart = {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
};
var title = {
text: 'Highcharts bubbles with radial gradient fill'
};
var xAxis = {
gridLineWidth: 1
};
var yAxis = {
startOnTick: false,
endOnTick: false
};
var series= [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}
}
];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
以上实例输出结果为：
我正在尝试显示数据标签。但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
问题有没有什么方法可以在不始终显示工具提示的情况下为Chart.js气泡图中的单个气泡添加标签？背景图表数据用于可视化我们的项目积压工作。有关每个项目的其他详细信息，即项目名称，都在一个表中。我们之前使用的是谷歌图表，只是在气泡上包含了表格中的行号，这样您就可以进行匹配。使用Chart.js，我只能得到气泡和工具提示。我已经查看了以下相关问题，但他们建议的解决方案需要始终显示工具提示。我在工具提示中获得了更多信息，并且一直显示它们会使图表变得非常困惑。Canindividualbubblesinachartjsbubblecharthavelabels?Howtoshowtooltip
我正在使用自定义可视化组件和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
我正在使用以下逻辑创建一个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
我正在尝试绘制一个分类的多轴排名柱形图。排名第一的应该是最高的列，最低的排名应该是最短的。基本上我希望条形的高度是倒数。非常接近:varplayer_name_array=["AaronRodgers","AndrewLuck","DrewBrees","RussellWilson","PeytonManning","RyanTannehill","TonyRomo","MattRyan","CamNewton","BenRoethlisberger","EliManning","PhilipRivers","ColinKaepernick","TeddyBridgewater","M