我正在使用chart.js插件并通过栏视图使用组图表.
当我悬停一组酒吧时,我可以看到一个工具提示,向我显示这些酒吧的数据.
但是当我将鼠标悬停在条形数据上时,我应该更改工具提示以显示我唯一的单个数据.
而我该如何显示不同的数据信息.
jsfiddle example
当我悬停一组酒吧时,我可以看到一个工具提示,向我显示这些酒吧的数据.
但是当我将鼠标悬停在条形数据上时,我应该更改工具提示以显示我唯一的单个数据.
而我该如何显示不同的数据信息.
jsfiddle example
var ctx = document.getElementById("errorChart").getContext("2d");
var data = {
labels: ["January","February","March","April","May","June","July"],datasets: [
{
label: "My First dataset",fillColor: "rgba(220,220,0.5)",strokeColor: "rgba(220,0.8)",highlightFill: "rgba(220,0.75)",highlightStroke: "rgba(220,1)",data: [65,0]
},{
label: "My Second dataset",fillColor: "rgba(151,187,205,strokeColor: "rgba(151,highlightFill: "rgba(151,highlightStroke: "rgba(151,data: [28,48,40,19,86,27,90]
}
]
};
var myBarChart = new Chart(ctx).Bar(data);
解决方法
您可以扩展条形图以包含此功能.默认情况下,它将返回您悬停的索引处的两个条形图,它还会在创建工具提示之前检查您悬停的区域中的多个条形图,并将缺少的任何额外条目放入其中.
所以要做到这一点,你需要覆盖两个函数getBarsAtEvent和showToolTip这里是一个例子和fiddle
我试图清楚地看到已经改变的两个重要区域,看看扩展栏类型中的注释.对帮助者的任何引用也进行了小的更改,因为它们在范围内,但现在需要显式调用Chart.helpers
Chart.types.Bar.extend({
name: "BarOneTip",initialize: function(data){
Chart.types.Bar.prototype.initialize.apply(this,arguments);
},getBarsAtEvent : function(e){
var barsArray = [],eventPosition = Chart.helpers.getRelativePosition(e),datasetIterator = function(dataset){
barsArray.push(dataset.bars[barIndex]);
},barIndex;
for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
//change here to only return the intrested bar not the group
barsArray.push(this.datasets[datasetIndex].bars[barIndex]);
return barsArray;
}
}
}
return barsArray;
},showTooltip : function(ChartElements,forceRedraw){
console.log(ChartElements);
// Only redraw the chart if we've actually changed what we're hovering on.
if (typeof this.activeElements === 'undefined') this.activeElements = [];
var isChanged = (function(Elements){
var changed = false;
if (Elements.length !== this.activeElements.length){
changed = true;
return changed;
}
Chart.helpers.each(Elements,function(element,index){
if (element !== this.activeElements[index]){
changed = true;
}
},this);
return changed;
}).call(this,ChartElements);
if (!isChanged && !forceRedraw){
return;
}
else{
this.activeElements = ChartElements;
}
this.draw();
console.log(this)
if (ChartElements.length > 0){
//removed the check for multiple bars at the index now just want one
Chart.helpers.each(ChartElements,function(Element) {
var tooltipPosition = Element.tooltipPosition();
new Chart.Tooltip({
x: Math.round(tooltipPosition.x),y: Math.round(tooltipPosition.y),xPadding: this.options.tooltipXPadding,yPadding: this.options.tooltipYPadding,fillColor: this.options.tooltipFillColor,textColor: this.options.tooltipFontColor,fontFamily: this.options.tooltipFontFamily,fontStyle: this.options.tooltipFontStyle,fontSize: this.options.tooltipFontSize,caretHeight: this.options.tooltipCaretSize,cornerRadius: this.options.tooltipCornerRadius,text: Chart.helpers.template(this.options.tooltipTemplate,Element),chart: this.chart
}).draw();
},this);
}
return this;
}
});
然后使用它只是做你以前做过的事情,但是使用BarOneTip(无论你喜欢什么,你都可以使用扩展图表的名称属性).
var ctx = document.getElementById("errorChart").getContext("2d");
var data = {
labels: ["January",90]
}
]
};
var myBarChart = new Chart(ctx).BarOneTip(data);
