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

});

提前很多！

P.S。如果可能的话，请避免使用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轴标签。为了省去扩展图表的麻烦，我们可以添加一个post动画事件处理程序并在其中执行此操作，就像这样

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个）重叠（当然你可以将逻辑结合到上面的循环来处理），但是，那些，实际上这些都是工具提示！ / p>

自定义Chart.js进行故障排除

1 个答案: