英文:
When hover on column bar the tooltip is not showing different colors for multiple columns in highchart
问题
当鼠标悬停在柱状图上时，工具提示应显示两种颜色，分别表示“年度OKR”和“年至今”，但它显示相同的颜色。
我正在使用以下脚本。
tooltip: {
formatter: function() {
let xAxisValue = this.point.name;
let yAxisValue = this.y;
let xAxisName = this.series.name;
if(hasMultipleCols){
if(typeof chartArrayData[1] != 'undefined') {
yAxisValue = chartArrayData[1].data[this.point.index];
xAxisValue = chartArrayData[0].data[this.point.index];
xAxisName = chartArrayData[0].name;
yAxisName = chartArrayData[1].name;
}
}
return `<span style="color:${this.color}">●</span> ${yAxisName }: <b>${ yAxisValue}</b><br/><span style="color:${this.color}">●</span> ${xAxisName}: <b>${xAxisValue }</b>`;
},
}
请参考附件：
请指导我。
谢谢！
英文:
When hover on column bar the tooltip should show two colors for OKR for the year and Year to date but it is showing same colors.
I am using this script.
tooltip: {
formatter: function() {
let xAxisValue = this.point.name;
let yAxisValue = this.y;
let xAxisName = this.series.name;
if(hasMultipleCols){
if(typeof chartArrayData[1] != 'undefined') {
yAxisValue = chartArrayData[1].data[this.point.index]; // this.point.name == undefined ? this.point.y : this.point.name
xAxisValue = chartArrayData[0].data[this.point.index];
xAxisName = chartArrayData[0].name;
yAxisName = chartArrayData[1].name;
}
}
return `<span style="color:${this.color}">●</span> ${yAxisName }: <b>${ yAxisValue}</b><br/><span style="color:${this.color}">●</span> ${xAxisName}: <b>${xAxisValue }</b>`;
},
}
Please attachment
Please guide me.
Thanks
答案1
得分: 1
最简单的方法是启用工具提示的 shared 选项：
tooltip: {
shared: true
}
然而，如果你想保留自定义的格式，你可以使用下面的格式化函数：
tooltip: {
formatter: function() {
const options = this;
const allSeries = options.series.chart.series;
let result = `<span style="color:${this.color}">●</span> ${options.series.name}: <b>${options.y}</b>`;
allSeries.forEach(series => {
if (series !== options.series) {
const point = series.points.find(p => p.x === options.point.x);
if (point) {
result += `<br/><span style="color:${series.color}">●</span> ${series.name}: <b>${point.y}</b>`;
}
}
});
return result;
}
}
在线演示： http://jsfiddle.net/BlackLabel/tf6jc5op/
API 参考：
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/tooltip.shared
英文:
The easiest way is to enable the shared option for tooltip:
tooltip: {
shared: true
}
However, if you want to keep your custom format, you can use the below formatter function:
tooltip: {
formatter: function() {
const options = this;
const allSeries = options.series.chart.series;
let result = `<span style="color:${this.color}">●</span> ${options.series.name}: <b>${options.y}</b>`;
allSeries.forEach(series => {
if (series !== options.series) {
const point = series.points.find(p => p.x === options.point.x);
if (point) {
result += `<br/><span style="color:${series.color}">●</span> ${series.name}: <b>${point.y}</b>`;
}
}
});
return result;
}
}
Live demo: http://jsfiddle.net/BlackLabel/tf6jc5op/
API Reference:
答案2
得分: 0
将颜色更改为静态变量，如果颜色仍然与bar相同，也许你应该检查 colorByPoint 属性。如果它是 true，则tooltip的颜色将设置为点的颜色。
这两个 this.color 指向同一个点，所以将第二个更改为另一个的颜色。
计划1：向图表添加 shared: true 属性以在bar之间共享信息。
像这样 👇
tooltip: {
formatter: function () {
// something your code here.
let secondColor = this.points && this.points.length > 1 ? this.points[1].color : this.color;
return `<span style="color:${this.color}">●</span> yAxisName1: <b>yAxisName12</b><br/><span style="color:${secondColor}">●</span> xAxisName1: <b>xAxisName2</b>`
},
shared: true
},
计划2：通过以下方式获取颜色：
this.point.series.xAxis.series[1].color
英文:
Change the color to a static variable, if the color is still the same with bar,
maybe you should check the colorByPoint property. if it's true, the color of the tooltip is set to the color of the point.
the two this.color target to the same point, so change the second on to another's color.
Plan 1: add a shared: true property to share the info between bars.
like this 👇
tooltip: {
formatter: function () {
// something your code here.
let secondColor = this.points && this.points.length > 1 ? this.points[1].color : this.color;
return `<span style="color:${this.color}">●</span> yAxisName1: <b>yAxisName12</b><br/><span style="color:${secondColor}">●</span> xAxisName1: <b>xAxisName2</b>`
},
shared: true
},
Plan 2: get color by:
this.point.series.xAxis.series[1].color
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论