Question

是否可以为ChartJS工具提示添加边框并设置边框的颜色？如果有可能，如何实施？

这是我的代码：

HTML：

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>

<canvas id="weeksChart" width="651" height="335"></canvas>

JavaScript的：

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function (data) {
        this.scale.startPoint = 25;
        Chart.types.Line.prototype.draw.apply(this, arguments);
    }
});


var dayTemperatureArray = [-5, 14, 15, 15, 17, 18, 19, 21, 22, 25, 24, 20, 19, 16];
var nightTemperatureArray = [-10, 4, 5, 6, 8, 11, 12, 15, 17, 15, 13, 12, 11, 9];

var dataWeeks = {
    labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"],
    datasets: [{
        label: "Days temperature chart",
        fillColor: "transparent",
        strokeColor: "rgba(244, 6, 6, 1)",
        data: dayTemperatureArray
    }, {
        label: "Nights temperature chart",
        strokeColor: "#3f6bf5",
        data: nightTemperatureArray
    }]
};


var animationComplete = function () {
    var self = this;

    Chart.helpers.each(self.datasets[0].points, function (point, index) {
        Chart.helpers.each(self.datasets, function (dataset) {
            new Chart.Tooltip({
                x: point.x,
                y: dataset.points[index].y,
                xPadding: self.options.tooltipXPadding,
                yPadding: self.options.tooltipYPadding,
                fillColor: self.options.tooltipFillColor,
                textColor: dataset.strokeColor,
                fontFamily: self.options.tooltipFontFamily,
                fontStyle: self.options.tooltipFontStyle,
                fontSize: self.options.tooltipFontSize,
                caretHeight: self.options.tooltipCaretSize,
                cornerRadius: self.options.tooltipCornerRadius,
                cornerRadius: self.options.tooltipCornerRadius,
                text: dataset.points[index].value + '°',
                chart: self.chart,
                custom: self.options.customTooltips
            }).draw()


        });

        self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
        self.chart.ctx.textAlign = 'center';
        self.chart.ctx.textBaseline = "middle";
        self.chart.ctx.fillStyle = "#666";
        self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);
    });
};

var ctx = document.getElementById("weeksChart").getContext("2d");
window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {
    responsive: true,
    pointDot: true,
    datasetStrokeWidth: 0.5,
    scaleSteps: 2,
    scaleLabel: "<%=value + '°'%>",
    tooltipTemplate: "<%= value %>",
    showTooltips: true,
    scaleShowLabels: false,
    scaleFontColor: "transparent",
    onAnimationComplete: function () {
        animationComplete.apply(this)
    },
    tooltipEvents: []
});

我尝试过与tooltipBorderColor的不同组合，但显然这不是我尝试做的事情的正确方法......

Answer 1

您可以调用笔触功能来绘制边框。工具提示对象中提供了所有路径坐标。

...
var strokeStyle = "red"
self.chart.ctx.lineWidth = 3;
Chart.helpers.each(self.datasets[0].points, function (point, index) {
    Chart.helpers.each(self.datasets, function (dataset) {
        self.chart.ctx.strokeStyle = strokeStyle;
        var tooltip = new Chart.Tooltip({
            x: point.x,
            y: dataset.points[index].y,
            xPadding: self.options.tooltipXPadding,
            yPadding: self.options.tooltipYPadding,
            fillColor: self.options.tooltipFillColor,
            textColor: dataset.strokeColor,
            fontFamily: self.options.tooltipFontFamily,
            fontStyle: self.options.tooltipFontStyle,
            fontSize: self.options.tooltipFontSize,
            caretHeight: self.options.tooltipCaretSize,
            cornerRadius: self.options.tooltipCornerRadius,
            cornerRadius: self.options.tooltipCornerRadius,
            text: dataset.points[index].value + '°',
            chart: self.chart,
            custom: self.options.customTooltips
        })
        tooltip.draw()
        self.chart.ctx.stroke();

        var direction = 1;
        if (tooltip.yAlign === "above")
            direction = -1;            

        // erase out the rounded border near where the caret appears
        self.chart.ctx.strokeStyle = self.options.tooltipFillColor;
        self.chart.ctx.beginPath();
        self.chart.ctx.moveTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.lineTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.stroke();

        // draw the caret angle
        self.chart.ctx.strokeStyle = strokeStyle;
        self.chart.ctx.beginPath();
        self.chart.ctx.moveTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.lineTo(tooltip.x, tooltip.y + direction * tooltip.caretPadding);
        self.chart.ctx.lineTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.stroke();
    });
...

小提琴 - http://jsfiddle.net/ubwLoern/

向Chart.js工具提示添加边框

1 个答案: