自定义gridLines和Axes Chartjs

Question

我正在尝试使用chartjs设计CDF图表以在图表中显示概率。基本上，我总是有100个点从0开始到我预先计算的最大数量，我想生成我附加的图表。平滑而不是很多gridLines。我尝试使用图表类型“line”，但它还远远不够。

你能不能帮我正确配置图表。

我正在寻找的例子：

Answer 1

首先关于gridLines，您可以在图表选项中更改 xAxes 的 stepSize （例如将其设为10）你将有10倍的垂直网格线（因为默认情况下你的xAxes stepSize似乎是1）。 如果大点困扰你，在创建数据集时，可以将 pointRadius 更改为0;这样，没有点显示只是一条平滑线。 最后，您可以通过设置属性 borderColor 来更改每个数据集的行颜色。

请查看此页面以获得更多自定义：http://www.chartjs.org/docs/latest/charts/line.html

希望这有帮助。

Answer 2

这是不使用autoSkip的解决方案，它使用网格线颜色选项隐藏不需要的x轴网格线。 （对不起，我的英国拼写为“ colour”！）

我无法使用autoSkip，因为我的时间/ x轴标签仅显示一次Year，Month，Date，并且我无法解决如何不跳过表示新月的特定标签的问题。我终于发现您可以在数组中定义网格线颜色，因此我的解决方案是创建一个网格线颜色数组，将图表背景色设置为我要隐藏的网格线。就我而言，我已经发送了一个带有空值的标签列表，用于不希望使用标签和网格线的情况，只是一个数据点。

ConfigSourceProvider

稍后在代码中：

var labels = data3json['labels'].split(',');

//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
    if (labels[i].length > 0) {
        if (i == 0) {
            xaxis_gridline_colours.push("#cccccc"); //x and y axis!
        } else {
            xaxis_gridline_colours.push("#dddddd"); //visible gridline
        }
    } else {
        xaxis_gridline_colours.push("#ffffff"); //invisible gridline
        //or call a chart background colour variable like:
        //xaxis_gridline_colours.push(chart_bkg_colour);
    }
}