自定义网格线和轴Chartjs

Question

我想用chartjs设计一个CDF图表，用图表来显示概率。基本上，我将始终有100个点，从0开始到某个我事先计算好的最大数字，我想生成我所附的图表。平滑且网格线不多。我尝试使用图表类型 "线"，但它是远远的。

请你帮我正确配置图表。

我正在寻找的例子。

Answer 1

首先是关于gridLines的问题，你可以在你的 图表选项 改变 步长 你的 xAxes (例如，把它放到10)，所以你将有10倍的少的垂直网格线(因为你的xAxes stepSize似乎是默认的1).如果大点是困扰你，当你创建你的数据集，你可以改变他们的 点半径 为0;这种方式没有点显示只是一个平滑线.最后，你可以改变每个数据集的线的颜色，通过设置的属性 边框颜色.

看看这个页面，了解更多的定制。http:/www.chartjs.orgdocslatestchartsline.html

希望能帮到你。

Answer 2

这是一个没有自动跳过的解决方案，使用网格线颜色选项来隐藏不需要的x轴网格线。(抱歉我的英式拼写 "颜色"!)

我不能使用autoSkip，因为我的timex轴标签只显示新的年，月，日期一次，我无法解决如何不跳过特定的标签，例如，这表明一个新的月份。我终于发现你可以在一个数组中定义网格线颜色，所以我的解决方案是创建一个网格线颜色数组，将图表背景颜色设置为我想要隐藏的网格线。在我的例子中，我已经发送了一个带空值的标签列表，当我不想要标签和网格线，只想要一个数据点的时候。

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 3

我注意到你们大多数人都是通过代码来添加线条样式的。我就是花了1h找设置，因为我改了一次，但是又改不了。

怎么做呢。Stackoverflow上的帖子给我指出了正确的方向。图表网格线样式

线：this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot。

转到属性->图表->图表区域，然后点击下一个集合的3个点（...）。

属性->图表->图表区域

在收藏中，进入Axes，再次点击3个点（...）下一个收藏。

斧头系列

你将有2个轴：X和Y。选择每个轴并进入所需的部分来更改属性。要小心。它们被很好地隐藏起来，但我试图突出显示所有的选项。当然，要执行自定义的修改，你将不得不编写代码。

轴集合编辑器