个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在研究带有列钻取图的 highcharts 堆叠列。我基于我在这个例子中所做的事情:http://jsfiddle.net/NULTY/753/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
level = 0,
data = [{
y: 55.11,
color: colors[0],
drilldown: {
type: 'pie',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
type: 'pie',
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
type: 'pie',
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
type: 'pie',
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
type: 'pie',
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
}],
data2 = [{
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
},{
y: 55.11,
color: colors[0],
drilldown: {
type: 'column',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}];
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
console.log("data:")
console.log(data)
var dataLen = data.length;
console.log("dataLen: " + dataLen)
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
console.log("hello world!")
console.log(data[i])
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'row 1 level 1 instructions<br/>';
s += ' row 2 level 1 instructions';
break;
case 1:
s = 'row 1 level 2 instructions <br/>';
s += ' row 2 level 2 instructions';
break;
case 2:
s = 'row 1 level 3 instructions<br/>';
s += 'row 2 level 3 instructions';
break;
case 3:
s = 'trial<br/>';
s += 'trial';
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name,
level: level,
data: data2,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
到目前为止，我所做的工作可以在这里找到:http://jsfiddle.net/NULTY/872/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Store A', 'Store B'],
name = 'Product Family',
level = 0,
data = [{
"y": 2849.25,
"TotalLocationSalesQuantity": 3,
"color": colors[0],
"drilldown": {
"type": "column",
"family": "Jacket",
"name": "Jacket Stock Breakdown",
"categories": [
"3229"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 2849.25,
"TotalStockSalesQuantity": 3
}
],
"color": "#2b908f"
}
},
{
"y": 7798,
"TotalLocationSalesQuantity": 8,
"color": "#90ee7e",
"drilldown": {
"type": "column",
"family": "Jacket",
"name": "Jacket Stock Breakdown",
"categories": [
"3229",
"3255"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 3799,
"TotalStockSalesQuantity": 4
},
{
"name": "3255",
"y": 3999,
"TotalStockSalesQuantity": 4
}
],
"color": "#90ee7e"
}
}],
data2 = [{
"y": 21944.75,
"TotalLocationSalesQuantity": 21,
"color": "#f45b5b",
"drilldown": {
"type": "column",
"family": "Pants",
"name": "Pants Stock Breakdown",
"categories": [
"3246",
"3277"
],
"level": 1,
"data": [
{
"name": "3246",
"y": 1999.5,
"TotalStockSalesQuantity": 2
},
{
"name": "3277",
"y": 19945.25,
"TotalStockSalesQuantity": 19
}
],
"color": "#f45b5b"
}
},
{
"y": 13646.75,
"TotalLocationSalesQuantity": 13,
"color": "#7798BF",
"drilldown": {
"type": "column",
"family": "Pants",
"name": "Pants Stock Breakdown",
"categories": [
"3277"
],
"level": 1,
"data": [
{
"name": "3277",
"y": 13646.75,
"TotalStockSalesQuantity": 13
}
],
"color": "#7798BF"
}
}],
data3 = [{
"y": 4748.75,
"TotalLocationSalesQuantity": 5,
"color": "#aaeeee",
"drilldown": {
"type": "column",
"family": "Shorts",
"name": "Shorts Stock Breakdown",
"categories": [
"3229"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 4748.75,
"TotalStockSalesQuantity": 5
}
],
"color": "#aaeeee"
}
},
{
"y": 6398,
"TotalLocationSalesQuantity": 8,
"color": "#ff0066",
"drilldown": {
"type": "column",
"family": "Shorts",
"name": "Shorts Stock Breakdown",
"categories": [
"3229",
"3259"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 3799,
"TotalStockSalesQuantity": 4
},
{
"name": "3259",
"y": 2599,
"TotalStockSalesQuantity": 4
}
],
"color": "#ff0066"
}
}]
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Sales breakdown'
},
subtitle: {
text: 'Click the columns to view stock number breakdown'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total Sales Amount'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2,data3], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return "P " + this.y;
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'this row level 1 units: <b>' + point.TotalLocationSalesQuantity + '</b><br/>';
break;
case 1:
s = 'this row level 2 units: <b>' + point.TotalLocationSalesQuantity + '</b><br/>';
break;
// case 2:
// s = 'row 1 level 3 instructions<br/>';
// break;
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name + "2",
level: level,
data: data2,
color: 'white'
},{
name: name + "3",
level: level,
data: data3,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
在这种情况下，我想要做的是在第一级上有两列，每列三个堆栈，当单击特定的 1 级堆栈部分时，会显示一个柱形图(第 2 级)，显示库存编号(例如 3229) 、3255等)组成的第一个药水将会出现。
例如，如果单击商店 A (P 2849.25) 的第 1 行，则应显示包含数据 P2849.25 的单柱形图。很可能，当单击商店 B (P 6398) 的第 3 行时，应显示包含数据 P3799 和 P2599 的柱形图。显示所需示例输出的插图
但是，当单击 1 级数据行时，我得到了一些随机数据。在级别 2 中，单击柱形图的任何部分将使图表显示级别 1，但这种情况不会发生。另外，我似乎没有获得第二级中每个点的深入->数据->TotalSalesQuantity。谁能帮我找出我做错了什么(或者我不能做什么)？
以下是实际发生情况的屏幕截图。
非常感谢您的帮助!
最佳答案
问题在于删除系列 - 现在您只删除一两个系列。应删除所有系列:
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
while(chart.series.length > 0) {
chart.series[0].remove();
}
for (var i = 0; i < dataLen; i++) {
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
关于javascript - Highcharts 堆叠列与钻取功能无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25134435/
25
4
0
如何将导出模块包含到 angular2 应用程序中？ 我尝试将以下脚本添加到 index.html 但没有任何反应。 最佳答案 从 Angular CLI 1.0-RC.1 和最新的 angular
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时，我需要 Highchart 水印图像。 我正在使用普通的 hicgchart 代码。
我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并显示在与内部显示相同的位置。有帮助吗？ 最佳答案 您可以定义自己的 d
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位，持续数天。我不希望图表每天都环绕，但希望所有数据都在一条线上。 具体来说，它用于显示每小时的云量百分比，因此每个热图
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
我很想知道为什么按钮 2 在这个 example 中不起作用 在这个 jsfiddle 示例中，附加到按钮 1 的“更新”方法正在运行，但在我的原始代码中，“更新”也不起作用。它显示错误:“对象# 没
我正在尝试在 highcharts 中编辑工具提示的边框。 我遇到的问题是我只想显示底部边框。 例如，您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗？ 这是问题jsfiddle.net/hHjZb/1286/的示例 最佳答案 更新: Highcharts现在已经实现了the O
在将图表导出为PNG时，我试图在饼图上添加图例。 这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
带三角规的半圆饼 如何在图表顶部创建带有三角形仪表的上述半圆饼图。 我的车速表可以工作，但不能满足需要。 在highchart api中有没有办法使用三角形作为仪表，而不是车速表？ 谢谢 最佳答案 这
我们使用的是Highchart气泡图，但是，当气泡x和y在图中位于同一位置且气泡y较小时，将无法看到或单击得很少的气泡。 有什么方法可以先绘制较大的气泡，然后在顶部绘制较小的气泡？还是说较小的始终位于
是否可以使用百分比设置 Highcharts 的宽度？每当调整页面大小时，图表应具有足够的响应速度以适合页面大小吗？ One Solution 这里的问题是我有3个图表需要并排显示，每次调整页面大小时
我在更新基本列 Highcharts 时遇到问题。 我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
有没有办法创建重叠的列？ 例如在 this jsFiddle ，蓝色和红色列应如下所示相互重叠，蓝色在后面，红色在前面。 澄清一下，我不想要堆叠的列，蓝色和红色列都应该从 xAxis (y=0) 开始
如何自定义图例 从 对此 最佳答案 查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
我正在尝试使用模式作为列范围以允许条形图工作。 图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。 这是一个片段，展示了我的意思: Highchar
我正在使用 HighStock JS 库生成一个图表，该图表使用 xAxis 的线性序列(不是时间序列)。 我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗？ 例如；说我的 xAxis
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的，这意味着我无法从单个系列下钻到多个系列；只有一个。我该如何解决这个问题？ 最佳答案 可以使用 chart.addSingl
我制作了一个带有分组和堆叠列的Highcharts图表，就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
如何在 highcharts/highstock 中将滚动条位置设置为Left？ 如图表加载时的图像所示， 滚动条自动右对齐。 有没有办法将它定位到左侧？ 最佳答案 我们可以通过将 min 设置为 0
我是一名优秀的程序员,十分优秀！