Question

我想问一下，如果有办法将图表推向右侧，那么将没有任何可用空间。我附上了简单的图像，红线显示，这个空间也应该用图表填充。

还可以创建垂直线作为点吗？我无法在官方文件

上找到我的问题的答案

这是我的javsacript代码：

 var lineChartData = {
                            labels : ["January","February","March","April"],
                            datasets : [
                                {
                                    label: "Dataset",   
                                    pointHighlightStroke : "rgba(220,220,220,1)",
                                    data : [0,3,4,11]
                                }
                            ]
                        };


                        window.onload = function(){
                            var ctx = document.getElementById("canvas").getContext("2d");
                            window.myLine = new Chart(ctx).Line(lineChartData, {

                                responsive: true,
                                scaleOverride: true,
                                scaleSteps: Math.ceil((max-start)/step),
                                scaleStepWidth: step,
                                pointDot : false,
                            });
                        }

Answer 1

空间在那里，因为最后的x轴标签（四月）。 Chart.js留下足够的空间，以便不会剪掉标签。这也确保了最后一点的工具提示显示没有剪切。

您可以将最后一个（或所有）标签设置为空字符串以消除空间。但是，您在工具提示中看不到任何标签。如果要查看工具提示中的标签，则需要扩展图表以删除x轴标签，如此

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        var labels = data.labels;
        data.labels = data.labels.map(function () { return '' });
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.datasets[0].points.forEach(function (point, i) {
            point.label = labels[i]
        })
    }
});

请注意，您需要使用LineAlt而不是Line。

小提琴 - http://jsfiddle.net/0u2c7tez/

然而，这仍然会截断最后一点的工具提示。如果您要启用工具提示并且不希望它们被剪掉，那么您需要使用自定义工具提示，以便工具提示在外部元素（而不是画布）中呈现而不会被剪裁（请参阅{ {3}}）

Chart.js和右侧自由空间

1 个答案: