着色 Highcharts 类别
Coloring Highcharts category
我试图在我的列范围图表上区分多种类型的数据。问题是我希望能够按多个标准对它们进行分组。
我可以轻松地为解决一个问题的不同列着色,但我也希望能够根据我传递给图表的数据为 xAxis 上的类别着色(图表是倒置的),以获得类似的东西:
有什么办法可以得到这个?
编辑:
我正在以具有多个键的字典形式传递我的数据:
entries[record['url']] = {
'location': categories.index(str(counter) + '. ' + (record['term'] if record['term'] else record['uterm'])),
'subjectid': record['subjectid'],
'subject': record['subject'],
'uterm': record['uterm'],
'term': record['uterm'] if record['term'] else 'Uncoded term',
'start_day': start_day,
'end_day': end_day,
'start': record['start'] if record['start'] else oldest_date,
'end': record['full_end'] if record['full_end'] else '',
'full_end': record['full_end'] if record['full_end'] != record['full_start'] and record['full_end']!= '' else datetime.now().strftime(date_format),
'full_start': record['full_start'],
'persistence': record['persistence'] if record['persistence'] else '',
'serious': record['serious'] if record['serious'] else '',
'section': record['section'] if record['section'] else '',
'min_date': record['min_date'],
'color':'#FF4136' if record['serious'] and record['serious'].lower() == 'yes' else '#FF7329'
我从数据库中以 pandas 数据框的形式获取数据。我想根据 section
和类别 serious
使用 color
键
对各个条进行颜色编码
编辑 2:
我听从了 Kamil 的建议,但现在我不确定如何动态添加数据,我尝试了以下方法:
var data = [];
var cols = [];
for( elem in options_data){
data.push({
x: options_data[elem]['location'],
low: options_data[elem]['start_day'],
high: options_data[elem]['end_day'],
color: options_data[elem]['color']
});
cols.push({
y: 0,
color: '#bada55'
});
}
data.join(", ");
cols.join(", ");
chart.addSeries([{
type: 'column',
yAxis: 1,
data: cols,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
},{
name: "Study Days",
data: data,
maxPointWidth: 30,
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
}]);
这不会导致任何错误,但图表不会获取数据。这种方法仅适用于 1 个系列,但不适用于两个系列。
编辑 3:
我已设法解决数据问题。我添加数据的最终版本是:
chart.addSeries({
type: 'column',
yAxis: 1,
data: cols,
zIndex: 9999,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
chart.addSeries({
name: "Study Days",
data: data,
maxPointWidth: 30,
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
您可以通过添加另一个巧妙配置的 列系列 和与之关联的 y 轴来实现这种外观:
series: [{
// series that mimics category markers
type: 'column',
yAxis: 1,
data: [{
y: 0,
color: '#bada55'
}, {
y: 0,
color: '#c0ffee'
}],
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
},
// normal series...
],
yAxis: [{}, {
// axis for category markers series
tickPositions: [0, 1000],
visible: false
}],
xAxis: {
categories: ['apples', 'oranges'],
offset: -10
},
现场演示: http://jsfiddle.net/BlackLabel/zfrq0tt2/
适当的 Series.minPointLenght
、Series.threshold
和 Axis.tickPositions
值以及列的零 y 值会导致条形始终保持恒定宽度。可以通过禁用 showInLegend
、tooltip.pointFormat
和 states.hover.enabled
属性来阻止与该系列的互动。
我试图在我的列范围图表上区分多种类型的数据。问题是我希望能够按多个标准对它们进行分组。
编辑:
我正在以具有多个键的字典形式传递我的数据:
entries[record['url']] = {
'location': categories.index(str(counter) + '. ' + (record['term'] if record['term'] else record['uterm'])),
'subjectid': record['subjectid'],
'subject': record['subject'],
'uterm': record['uterm'],
'term': record['uterm'] if record['term'] else 'Uncoded term',
'start_day': start_day,
'end_day': end_day,
'start': record['start'] if record['start'] else oldest_date,
'end': record['full_end'] if record['full_end'] else '',
'full_end': record['full_end'] if record['full_end'] != record['full_start'] and record['full_end']!= '' else datetime.now().strftime(date_format),
'full_start': record['full_start'],
'persistence': record['persistence'] if record['persistence'] else '',
'serious': record['serious'] if record['serious'] else '',
'section': record['section'] if record['section'] else '',
'min_date': record['min_date'],
'color':'#FF4136' if record['serious'] and record['serious'].lower() == 'yes' else '#FF7329'
我从数据库中以 pandas 数据框的形式获取数据。我想根据 section
和类别 serious
使用 color
键
编辑 2:
我听从了 Kamil 的建议,但现在我不确定如何动态添加数据,我尝试了以下方法:
var data = [];
var cols = [];
for( elem in options_data){
data.push({
x: options_data[elem]['location'],
low: options_data[elem]['start_day'],
high: options_data[elem]['end_day'],
color: options_data[elem]['color']
});
cols.push({
y: 0,
color: '#bada55'
});
}
data.join(", ");
cols.join(", ");
chart.addSeries([{
type: 'column',
yAxis: 1,
data: cols,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
},{
name: "Study Days",
data: data,
maxPointWidth: 30,
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
}]);
这不会导致任何错误,但图表不会获取数据。这种方法仅适用于 1 个系列,但不适用于两个系列。
编辑 3:
我已设法解决数据问题。我添加数据的最终版本是:
chart.addSeries({
type: 'column',
yAxis: 1,
data: cols,
zIndex: 9999,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
chart.addSeries({
name: "Study Days",
data: data,
maxPointWidth: 30,
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
您可以通过添加另一个巧妙配置的 列系列 和与之关联的 y 轴来实现这种外观:
series: [{
// series that mimics category markers
type: 'column',
yAxis: 1,
data: [{
y: 0,
color: '#bada55'
}, {
y: 0,
color: '#c0ffee'
}],
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
},
// normal series...
],
yAxis: [{}, {
// axis for category markers series
tickPositions: [0, 1000],
visible: false
}],
xAxis: {
categories: ['apples', 'oranges'],
offset: -10
},
现场演示: http://jsfiddle.net/BlackLabel/zfrq0tt2/
适当的 Series.minPointLenght
、Series.threshold
和 Axis.tickPositions
值以及列的零 y 值会导致条形始终保持恒定宽度。可以通过禁用 showInLegend
、tooltip.pointFormat
和 states.hover.enabled
属性来阻止与该系列的互动。