Javascript 如何在chart.js中的图形和X/Y比例之间添加填充？

我用Chart.js得到了一个简单的折线图

它应该是这样的：（Photoshop，我用红线标记了填充物）

chart.js当前的外观：

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

我的折线图代码：

HTML:

图表选项：

在搜索问号chart.js后，我发现了一个非常类似的问题，但效果不太好，因为悬停时解决方案有问题，而且不是折线图。（）

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

---

提前感谢

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

您打算不显示轴线（我从图像中看到，您将图表背景和比例颜色设置为相同），并且

您已经硬编码了缩放起始值和结束值（我假设您知道数据将在其中的值范围，不需要自动计算）-如果此条件不适用，请参阅替代解决方案

---

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

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

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

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

请注意，如果您使用的是其他图表，而您不希望应用此功能，则需要在完成图表初始化后还原此功能

---

---

小提琴-

谢谢你指出这一点！我已经在链接答案的提琴中修复了它。@potatopeelings感谢您更新了您伟大的解决方案！你能不能也为线条图创建解决方案，或者解释一下我自己怎么做？我的JavaScript技能真的很像0——所以我只是生活在这些库和像你这样帮助调整它们的人中。提前感谢！我对您当前的代码做了一些假设。如果这些不正确，请告诉我。顺便说一下，你不必像你的问题那样设置

图表.defaults.global。您只需覆盖您喜欢的
Chart.defaults.global.scaleSteps=7；Chart.defaults.global.animation=false对于您的单个图表选项，您只需要在选项对象中包含要覆盖的选项-您可以忽略其他选项。首先：非常感谢！编辑：按enter键时，它总是自动发送答案。所以：我真的不知道我的数据将在什么范围内。为什么我现在硬编码：否则，scala将进入下一个100步，我不想这样做。我想计算一个良好的开始/步长和PHP中的步长值总数。这意味着您的答案本身有效，但不适用于其他数据集，因为最后的填充会有所不同。我希望你明白我的意思。但是谢谢你抽出时间来！再次感谢您的编辑！填充看起来很好，但是没有我的Scala值，我得到了一个不必要的大y-Scala。图片：是否可以使图形中的最高值等于Y刻度上的最高点？或者可能是一个没有现在那么大的差距。无论如何，再次感谢你的时间！尝试使用calculateScaleRange函数来减少scalerAge.max值，直到它在数据最大值的1个步长内（您需要减少scalerAge.steps以匹配顺便说一句）-看看这里修改的函数，我真的不知道如何按照我想要的方式调整它，但这把小提琴似乎已经足够好了。我可以非常感谢你，并祝你有一个伟大的一天，因为你的所有帮助！这很简单。我们允许chart.js进行比例计算。然后，我们将标尺顶部调整为与最大数据值相差2步以内。你想做什么改变？Bte如果它太靠近你的圆圈边缘，你会被剪掉。
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);

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

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

// 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;
}