自定義 gridLines 和 Axes Chartjs

Question

我正在嘗試使用 chartjs 設計 CDF 圖表以在圖表中顯示概率。 基本上，我總是有 100 個點，從 0 開始到我預先計算的某個最大數字，我想生成我附加的圖表。 平滑且網格線不多。 我嘗試使用圖表類型“線”，但還差得很遠。

你能幫我正確配置圖表嗎？

我正在尋找的示例：

Answer 1

首先關於網格線，您可以在圖表選項中更改xAxes的stepSize （例如將其設置為 10），這樣垂直網格線將減少 10 倍（因為默認情況下 xAxes stepSize 似乎為 1）。 如果大點困擾你，當你創建你的數據集時，你可以將它們的pointRadius更改為 0； 這樣沒有點顯示只是一條平滑線。 最后，您可以通過設置屬性borderColor來更改每個數據集的線條顏色。

看看這個頁面更多的定制： http : //www.chartjs.org/docs/latest/charts/line.html

希望這會有所幫助。

Answer 2

這是一個沒有自動跳過的解決方案，使用網格線顏色選項隱藏不需要的 x 軸網格線。 （對不起，我對“顏色”的英式拼寫！）

我不能使用 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 3

我注意到你們中的大多數人只能通過代碼添加線條樣式。 我只花了 1 小時尋找設置，因為我更改了一次，但后來我無法再次更改它。

怎么做。 Stackoverflow 上的帖子為我指明了正確的方向。 圖表網格線樣式

線：this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot

轉到 Properties->Chart->Chart Areas 並單擊 3 點 (...) 下一個集合。

屬性

在 Collection 中，轉到 Axes 並再次單擊 3 點 (...) 下一個集合。

軸集合

您將有 2 個軸：X 和 Y。選擇每個軸並轉到所需部分以更改屬性。 小心點。 它們隱藏得很好，但我試圖突出顯示所有選項。 當然，要執行自定義修改，您必須對其進行編碼。

軸集合編輯器