javascript - 如何在 chart.js 中的 Graph 和 X/Y-Scale 之间添加填充？

Question

我有一个使用 chart.js 的简单折线图。

它应该看起来像这样:http://fs1.directupload.net/images/150819/ktkgs9pw.jpg (Photoshop，我用红线标记了填充)

chart.js 目前的情况:http://fs2.directupload.net/images/150819/ql5l3jez.png

如您所见，图形点的轮廓与底部的 X 尺度(例如“2:00 PM”)和左侧的 Y 尺度(例如“0”)重叠.

我的折线图代码:

HTML:

<canvas id="server-usage"></canvas>

全局图表设置:

Chart.defaults.global = {
            // Boolean - Whether to animate the chart
            animation: false,

            // Number - Number of animation steps
            animationSteps: 60,

            // String - Animation easing effect
            // Possible effects are:
            // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
            //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
            //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
            //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
            //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
            //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
            //  easeOutElastic, easeInCubic]
            animationEasing: "easeInOutQuart",

            // Boolean - If we should show the scale at all
            showScale: true,

            // Boolean - If we want to override with a hard coded scale
            scaleOverride: true,

            // ** Required if scaleOverride is true **
            // Number - The number of steps in a hard coded scale
            scaleSteps: 7,
            // Number - The value jump in the hard coded scale
            scaleStepWidth: 18,
            // Number - The scale starting value
            scaleStartValue: 0,

            // String - Colour of the scale line
            scaleLineColor: "#565a60",

            // Number - Pixel width of the scale line
            scaleLineWidth: 0.1,

            // Boolean - Whether to show labels on the scale
            scaleShowLabels: true,

            // Interpolated JS string - can access value
            scaleLabel: "<%=value%>",

            // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
            scaleIntegersOnly: true,

            // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero: false,

            // String - Scale label font declaration for the scale label
            scaleFontFamily: "'Open Sans', sans-serif",

            // Number - Scale label font size in pixels
            scaleFontSize: 13,

            // String - Scale label font weight style
            scaleFontStyle: "500",

            // String - Scale label font colour
            scaleFontColor: "#7c8189",

            // Boolean - whether or not the chart should be responsive and resize when the browser does.
            responsive: true,

            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: false,

            // Boolean - Determines whether to draw tooltips on the canvas or not
            showTooltips: true,

            // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
            customTooltips: false,

            // Array - Array of string names to attach tooltip events
            tooltipEvents: ["mousemove", "touchstart", "touchmove"],

            // String - Tooltip background colour
            tooltipFillColor: "#42454a",

            // String - Tooltip label font declaration for the scale label
            tooltipFontFamily: "'Open Sans', sans-serif",

            // Number - Tooltip label font size in pixels
            tooltipFontSize: 15,

            // String - Tooltip font weight style
            tooltipFontStyle: "normal",

            // String - Tooltip label font colour
            tooltipFontColor: "#e7e7e7",

            // String - Tooltip title font declaration for the scale label
            tooltipTitleFontFamily: "'Open Sans', sans-serif",

            // Number - Tooltip title font size in pixels
            tooltipTitleFontSize: 14,

            // String - Tooltip title font weight style
            tooltipTitleFontStyle: "regular",

            // String - Tooltip title font colour
            tooltipTitleFontColor: "#fff",

            // Number - pixel width of padding around tooltip text
            tooltipYPadding: 6,

            // Number - pixel width of padding around tooltip text
            tooltipXPadding: 6,

            // Number - Size of the caret on the tooltip
            tooltipCaretSize: 8,

            // Number - Pixel radius of the tooltip border
            tooltipCornerRadius: 0,

            // Number - Pixel offset from point x to tooltip edge
            tooltipXOffset: 10,

            // String - Template string for single tooltips
            tooltipTemplate: "On <%if (label){%><%=label%> there were <%}%><%= value %> active users",

            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= value %>",

            // Function - Will fire on animation progression.
            onAnimationProgress: function(){},

            // Function - Will fire on animation completion.
            onAnimationComplete: function(){}
}

一些图表数据:

var usageData = {
     labels : ["2:00 PM","4:00 PM","6:00 PM","8:00 PM","10:00 PM","0:00 AM","2:00 AM"],
     datasets : [
         {
               strokeColor : "#61666c",
               pointColor : "#4e82c9",
               pointStrokeColor : "#565a60",
               data : [0,120,120,100,60,40,0]
          }
     ]
}

图表选项:

var options = {

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines : false,

            //String - Colour of the grid lines
            scaleGridLineColor : "rgba(0,0,0,.05)",

            //Number - Width of the grid lines
            scaleGridLineWidth : 1,

            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,

            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,

            //Boolean - Whether the line is curved between points
            bezierCurve : false,

            //Number - Tension of the bezier curve between points
            bezierCurveTension : 0.4,

            //Boolean - Whether to show a dot for each point
            pointDot : true,

            //Number - Radius of each point dot in pixels
            pointDotRadius : 18,

            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth : 8,

            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius : 20,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke : true,

            //Number - Pixel width of dataset stroke
            datasetStrokeWidth : 4,

            //Boolean - Whether to fill the dataset with a colour
            datasetFill : false,

            //String - A legend template
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

};

创建图表:

var serverUsage = document.getElementById('server-usage').getContext('2d');
new Chart(serverUsage).Line(usageData, options);

我在搜索 Question-Tag chart.js 后发现了一个非常相似的问题，但效果不是很好，因为解决方案在悬停时有问题，而且它不是折线图。 ( Chart.JS spacing and padding )

Answer 1

实际上您不需要链接解决方案的所有复杂性，因为

1. 您打算不显示轴线(我从图像中看到您会将图表背景和刻度颜色设置为相同)和
2. 您已经对刻度开始值和结束值进行了硬编码(我假设您知道数据所处的值范围并且不需要自动计算)- 如果此条件不成立，请参阅替代解决方案为你

---

有了这些注意事项，您只需要进行一些更改(只需在选项名称上按 Ctrl + F 即可找到要替换的行)

scaleSteps: 5,
// Number - The value jump in the hard coded scale
scaleStepWidth: 50,
// Number - The scale starting value
scaleStartValue: -50,

我们基本上是从比我们需要的值低 1 步的值开始缩放。这提升了图表。现在我们需要做的就是隐藏这个额外的比例标签，我们用

scaleLabel: function (d) {
    if (d.value < 0)
        return '';
    else
        return d.value + '         ';
},

该方法的第一行负责隐藏额外的刻度标签。最后一行的 + ' ' 将图表向右移动(我们告诉 Chart.js 标签比实际长)

---

fiddle - http://jsfiddle.net/56578cn4/

---

---

如果2.不适用，去掉scaleOverride和配置，重写初始化图表之前计算y轴刻度范围的常用方法，在上面添加一个刻度标签，在下面添加一个刻度标签

// this applies to all chart instances that use this scale!
var originalCalculateScaleRange = Chart.helpers.calculateScaleRange;
Chart.helpers.calculateScaleRange = function () {
    var scaleRange = originalCalculateScaleRange.apply(this, arguments);
    // add 1 unit at the top and bottom
    scaleRange.min = scaleRange.min - scaleRange.stepValue;
    scaleRange.max = scaleRange.max + scaleRange.stepValue;
    scaleRange.steps = scaleRange.steps + 2;
    return scaleRange;
}

假设您不介意值都大于 0 时的额外标签(我们的 scaleLabel 选项负责隐藏负面标签，并且仅隐藏负面标签)，这将很好地工作。

请注意，如果您正在使用其他不希望应用此功能的图表，则需要在完成图表初始化后恢复此功能。

---

fiddle - http://jsfiddle.net/mkzdzj3b/