Question

我使用chart.js获得了一个简单的折线图。

看起来应该是这样的：http://fs1.directupload.net/images/150819/ktkgs9pw.jpg（Photoshop，我用红线标记了填充）

目前使用chart.js看似什么：http://fs2.directupload.net/images/150819/ql5l3jez.png

正如您所看到的，图形点的轮廓与底部的X-Scale重叠，例如“2:00 PM”和左侧的Y-Scale，例如“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之后发现了一个非常相似的问题，但它没有太好用，因为当悬停时解决方案有问题并且它不是Line-Chart。（Chart.JS spacing and padding）

我希望我提供了足够的信息，有人可以帮助我，因为我真的对JavaScript一无所知。 先谢谢！

Answer 1

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

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

有了这些警告，您只需要进行一些更改（只需在选项名称上按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标签比实际更长）

小提琴 - 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选项负责隐藏负片标签和仅负片标签），假设您不介意额外的标签，这将正常工作。

请注意，如果您使用的其他图表不希望此类图表应用，则需要在初始化图表后将其还原。

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

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

1 个答案: