Javascript Chart.js 2.5版工具提示水平对齐项目

我正在开发chart.js 2.5版

当前值显示为垂直，我希望显示为水平

一些前进图表有20个值

请检查下面所附的图片

预期结果：

• 白人或白种人，黑人或非裔美国人排成一行

• 亚洲其他和亚洲日本人在另一排

我尝试实现自定义工具提示。如中所述，但不成功

感谢您的帮助

更新

下面是@Francisco Soares的回答

我面临一个问题

• 移动光标时不会删除工具提示

附加截图

更新 最后，图表运行良好，一个问题被左偏移。它超出了图表的范围。

第1期-表格内容对齐中心 可以使用以下css更改对齐方式：

#tooltip td {
  text-align: left;
}

问题2-移动光标时未删除工具提示 我无法复制此问题，因为该函数仅使用一个id为

工具提示的
div
，不应追加此id

我能接近这个问题的地方是，如果你有不同的
id
，那么
chart.js
将在每次尝试渲染时创建一个新的工具提示。以下是一个例子：


因此，请确保id相同，并让我知道这是问题所在

问题3-画布末尾的工具提示位置
另一个问题是，在画布的末尾，工具提示将扭曲以适合图表，我的建议是创建一个偏移量，以便工具提示远离边框：

示例1-工具提示浮动到画布的另一侧

  var offset = tooltip.width + 20;
  if (this._chart.width / 2 < tooltip.caretX) {
    offset *= -1;
  }

  // Hidden Code
  tooltipEl.style.left = positionX + tooltip.caretX + offset + 'px';

#工具提示{
不透明度：1；
位置：绝对位置；
背景：rgba（0,0,0,7）；
颜色：白色；
边界半径：3px；
-webkit过渡：所有.1s易用性；
过渡：全部1秒轻松；
指针事件：无；
-webkit转换：转换（-50%，0）；
转换：转换（-50%，0）；
填充：4px；
}
#工具提示td{
文本对齐：左对齐；
}
.chartjs工具提示键{
显示：内联块；
宽度：10px；
高度：10px；
右边距：10px；
}

最终功能将是（希望有人在将来它将提供帮助）

函数buildChartOptions（xAxisLabel、yAxisLabel、pointStyle、position）{
变量选项={
工具提示：{
启用：false，
模式：“索引”，
交集：错，
multiKeyBackground:“rgb（0,0,0）”，
体型：14，
标题字体：16，
加上：20，
加上：20，
//自定义工具提示元素
自定义：函数（工具提示）{
var tooltipEl=''；
tooltipEl=document.getElementById（“自定义工具提示”）；
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='自定义工具提示'；
tooltipEl.innerHTML=''；
document.body.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（工具提示.yAlign）{
添加（tooltip.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
函数getBody（bodyItem）{
返回bodyItem.line；
}
//设置文本
if（tooltip.body）{
var titleLines=tooltip.title | |[]；
var bodyLines=tooltip.body.map（getBody）；
var innerHtml=''；
var inHeadStyle='填充底部：10px；'；
标题行。forEach（函数（标题）{
innerHtml+=''+标题+''；
});
innerHtml+=''；
bodyLines.forEach（函数（body，i）{
var colors=tooltip.labelColors[i]；
var colorType=“”；
//如果图表是卡吉图，请选择边框颜色
if（pointStyle==0）{
colorType=colors.borderColor；
}else{//如果散点图选择背景色
colorType=colors.backgroundColor；
}
var style='background:'+colorType；
样式+='；边框颜色：'+colors.borderColor；
样式+='；边框宽度：2px'；
var inStyle='text align:left；'；
var span=''；
var innerContent=''+span+body+''；
//每个偶数/奇数创建一个新tr
如果（i%2==0）{
innerHtml+=''+innerContent；
}否则{
innerHtml+=innerContent+''；
}
});
//如果是奇数个ITEN，则关闭最后一个打开的tr
如果（bodyLines.count%2==1）{
innerHtml+=''；
}否则{
innerHtml+=''；
}
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
var position=this.\u chart.canvas.getBoundingClientRect（）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
  var offset = tooltip.width + 20;
  if (this._chart.width / 2 < tooltip.caretX) {
    offset *= -1;
  }

  // Hidden Code
  tooltipEl.style.left = positionX + tooltip.caretX + offset + 'px';

  var offset = tooltip.caretX + 20;
  if (offset < tooltip.width)
    offset = tooltip.width;
  else if (tooltip.caretX > this._chart.width - tooltip.width)
    offset = this._chart.width - tooltip.width;

  // Hidden Code
  tooltipEl.style.left = positionX + offset + 'px';

function buildChartOptions(xAxisLabel, yAxisLabel, pointStyle, position) {

    var options = {
        tooltips: {
            enabled: false,
            mode: 'index',
            intersect: false,
            multiKeyBackground: 'rgb(0,0,0)',
            bodyFontSize: 14,
            titleFontSize: 16,
            xPadding: 20,
            yPadding: 20,
            //Custom Tooltip Element
            custom: function(tooltip) {
                var tooltipEl = '';
                tooltipEl = document.getElementById('custom_tooltip');

                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'custom_tooltip';
                    tooltipEl.innerHTML = '<table></table>';
                    document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltip.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // Set caret Position
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltip.yAlign) {
                    tooltipEl.classList.add(tooltip.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // Set Text
                if (tooltip.body) {
                    var titleLines = tooltip.title || [];
                    var bodyLines = tooltip.body.map(getBody);

                    var innerHtml = '<thead>';
                    var inHeadStyle = 'padding-bottom:10px;';
                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th style="' + inHeadStyle + '">' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {

                        var colors = tooltip.labelColors[i];
                        var colorType = "";

                        //If chart is Kagi plot, pick border color
                        if (pointStyle == 0) {
                            colorType = colors.borderColor;
                        } else { //if scatter plot pick background color
                            colorType = colors.backgroundColor;
                        }

                        var style = 'background:' + colorType;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';

                        var inStyle = 'text-align:left;';

                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';

                        var innerContent = '<td>' + span + body + '</td>';

                        // Every even/odd create a new tr
                        if (i % 2 == 0) {
                            innerHtml += '<tr style="' + inStyle + '"> ' + innerContent;
                        } else {
                            innerHtml += innerContent + '</tr>';
                        }
                    });

                    // If is a odd number of itens close the last open tr
                    if (bodyLines.count % 2 == 1) {
                        innerHtml += '</tr></tbody>';
                    } else {
                        innerHtml += '</tbody>';
                    }

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                var position = this._chart.canvas.getBoundingClientRect();
                // Display, position, and set styles for font               
                tooltipEl.style.opacity = 1;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
                tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
                tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
                tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
            },
            callbacks: {
                label: function(tooltipItems, data) {
                    var prefix = data.datasets[tooltipItems.datasetIndex].label;
                    return prefix + " : " + tooltipItems.yLabel;
                },
                title: function(tooltipItems, data) {
                    var value = tooltipItems[0].xLabel;
                    return xAxisLabel + " : " + value;
                }
            }
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: xAxisLabel
                },
                ticks: {
                    maxRotation: 90,
                    minRotation: 90,
                    beginAtZero: true,
                    suggestedMin: 0,
                    autoSkip: false
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: yAxisLabel
                },
                ticks: {
                    beginAtZero: true,
                    suggestedMin: 0
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
        spanGaps: true,
        legend: {
            display: true,
            position: position,
            labels: {
                fontSize: 13,
                padding: 10
            }
        },
        elements: {
            point: {
                pointStyle: pointStyle
            }
        }
    }

    return options;
}