自定义Chart.js故障排除

Question

Chart.js遇到麻烦

1）是否可以将底部标签移动到图表顶部？2）是否可以用第一条灰线隐藏左标签？3）是否可以在每个点上设置永久性工具提示（以显示温度），而不是将鼠标悬停在工具提示上？

这是我的图表http://jsfiddle.net/JohnnyJuarez/ojc09hv4/：

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


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 ctx = document.getElementById("weeksChart").getContext("2d");
window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    responsive: true,
    pointDot: true,
    datasetStrokeWidth: 0.5,
    scaleSteps: 2,
    scaleLabel: "<%=value + '°'%>",
    tooltipTemplate: "<%= value %>",
    showTooltips: true

});

非常感谢！

ps请避免使用jquery，如果可能的话:-)

Answer 1

让我们先从最简单的一个开始

2）是否可以用第一条灰线隐藏左标签？

我假设您的意思是y轴标签。您可以scaleShowLabels在图表选项中将选项设置为false以隐藏y轴标签

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    scaleShowLabels: false,
    ...

1）是否可以将底部标签移动到图表顶部？

我假设您的意思是x轴标签。Chart.js没有直接选项可以执行此操作。但是，您可以隐藏实际的x轴标签，并自己在图表顶部绘制x轴标签。

同样，Chart.js没有隐藏x轴标签的选项，但是幸运的是，有一个选项可以控制比例字体颜色。只需将其设置为透明，即可隐藏原始的x轴标签！

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    scaleFontColor: "transparent",
    ...

现在，x轴标签的图形位于图表的顶部。为了省去扩展图表的麻烦，我们可以添加一个动画后事件处理程序，并像这样进行操作

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
     onAnimationComplete: function () {
          animationComplete.apply(this)
     }
     ...

与

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

    Chart.helpers.each(self.datasets[0].points, function (point, index) {
        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);
    });
};

我们只遍历一个数据集中的所有点并添加标签（scale.startPoint是图表区域的顶部边缘）

注意-为什么每次迭代都要设置字体，对齐方式等？那是当我们添加工具提示时。

3）是否可以在每个点上设置永久性工具提示（以显示温度），而不是将鼠标悬停在工具提示上？

第一步将是实际显示工具提示。这相当简单，尽管有点乏味。我们遍历所有x轴点，构建标签（通过遍历每个数据集），然后构造一个工具提示（幸运的是，我们可以使用Chart.MultiTooltip函数）。

我们将其添加到用于构造新x轴标签的同一循环中。因为我们需要给工具提示上色，所以我们需要获取颜色集合并将其存储在一个数组中（我们将其传递给MultiTooltip函数-我们只需要执行一次，因此就可以将其带出循环。

修改后的animationComplete函数现在是这个

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

    var tooltipColors = []
    Chart.helpers.each(self.datasets, function (dataset) {
        tooltipColors.push({
            fill: dataset.strokeColor,
            stroke: dataset.strokeColor
        })
    });

    Chart.helpers.each(self.datasets[0].points, function (point, index) {
        var labels = []
        var total = 0;
        Chart.helpers.each(self.datasets, function (dataset) {
            labels.push(dataset.points[index].value)
            total += Number(dataset.points[index].y);
        });

        new Chart.MultiTooltip({
            x: point.x,
            y: total / 2,
            xPadding: self.options.tooltipXPadding,
            yPadding: self.options.tooltipYPadding,
            xOffset: self.options.tooltipXOffset,
            fillColor: self.options.tooltipFillColor,
            textColor: self.options.tooltipFontColor,
            fontFamily: self.options.tooltipFontFamily,
            fontStyle: self.options.tooltipFontStyle,
            fontSize: self.options.tooltipFontSize,
            titleTextColor: self.options.tooltipTitleFontColor,
            titleFontFamily: self.options.tooltipTitleFontFamily,
            titleFontStyle: self.options.tooltipTitleFontStyle,
            titleFontSize: self.options.tooltipTitleFontSize,
            cornerRadius: self.options.tooltipCornerRadius,
            labels: labels,
            legendColors: tooltipColors,
            legendColorBackground: self.options.multiTooltipKeyBackground,
            title: point.label,
            chart: self.chart,
            ctx: self.chart.ctx,
            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);
    });
};

它看起来很复杂，但是我们要做的只是传递一个选项，该选项从图表实例选项复制到MultiTooltip函数。

动画完成后，所有工具提示都会显示。但是，一旦将鼠标移到图表上，它们就会全部消失并消失！这是因为图表实例会监听多个事件，以决定是否开始检查是否应该显示工具提示-其中之一是mousemove（这会导致它重新绘制图表，清除所有硬绘制的工具提示，如果幸运的话，它会根据我们的鼠标悬停的点绘制工具提示）

这是一个可配置的选项。因此，我们要做的就是删除所有此类事件。

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    tooltipEvents: []
    ...

工作小提琴-http: //jsfiddle.net/fuodxsfv/

除非您的图表足够宽，否则您将有一些工具提示（通常是中间的2个）重叠（当然，您可以将逻辑合并到上面的循环中进行处理），但是，实际上，这些实际上是工具提示！