自定义gridLines和Axes图表

Question

我正在尝试设计一个CDF图表，使用chartjs在图表中显示概率。基本上，我总是会有100个点，从0开始，一些最大的数字，我事先计算，我想生成图表，因为我附加。很流畅，gridLines也不多。我尝试使用图表类型"line"，但它离得很远。

你能帮我正确配置图表吗？

​

​

我正在寻找的示例：

​

​

​

​

Answer 1

这是一个没有autoSkip的解决方案，使用网格线颜色选项来隐藏不需要的x轴网格线。(对不起，我的英语拼写“colour”！)

我不能使用autoSkip，因为我的时间/x轴标签只显示一次新的年、月、日，并且我不知道如何不跳过指示新月份的特定标签。我最终发现您可以在数组中定义网格线颜色，所以我的解决方案是创建一个网格线颜色数组，将图表背景颜色设置为我想要隐藏的网格线。在我的例子中，当我不需要标签和网格线时，我已经发送了一个带有空值的标签列表，只需要一个数据点。

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

在后面的代码中：

chart = new Chart(ctx24, {         
    options: {
        scales: { 
            xAxes: [{
                gridLines: {
                    display: true, //default true   
                    color: xaxis_gridline_colours,

                  etc

Answer 2

首先关于gridLines，您可以在图表选项中更改 xAxes 的垂直网格线( of xAxes)(例如，将其设置为10 )，这样垂直网格线就会减少10倍(因为默认情况下xAxes stepSize似乎为1)。如果这些大点困扰着您，当您创建数据集时，您可以将它们的pointRadius更改为0；这样，不会显示任何点，只会显示一条平滑线。最后，您可以通过设置属性borderColor来更改每个数据集的线条的颜色。

请查看此页面以了解更多定制信息：http://www.chartjs.org/docs/latest/charts/line.html

希望这能有所帮助。

Answer 3

我注意到你们中的大多数人只通过代码添加线条样式。我只花了1个小时寻找设置，因为我改变了它一次，但后来我不能再改变它。

怎么做。Stackoverflow上的帖子给我指明了正确的方向。Charts grid lines style

线路: this.chart1.ChartAreas.AxisX.LineDashStyle.Dot

转到Properties->Chart->Chart Area并单击3点(...)下一个集合。

Properties

在集合中，转到轴，然后再次单击3点(...)下一个集合。

Axes Collection

您将有两个轴:X和Y。选择每个轴并转到所需部分以更改属性。注意。它们隐藏得很好，但我试图强调所有的选项。当然，要执行自定义修改，您必须对其进行编码。

Axis Collection Editor