更改Chart.js打勾標籤的位置

我使用Chart.js創建了條形圖。目前，勾號標籤位於條的左側。我如何改變標籤的位置並將它們移動到條形頂部？更改Chart.js打勾標籤的位置

這是我的圖目前的樣子：

我想我的圖表看起來像下面的圖片，與標籤上的條的頂部：

這裏是在main.js我的選擇塊：

var options_chart = { 

    // showLines: false, 

    scales: { 
    yAxes: [{ 
     gridLines: { 
     display: false 
     }, 
     ticks: { 
     max: 5, 
     min: 0, 
     stepSize: 100 
     } 
    }], 

    xAxes: [{ 
     gridLines: { 
     display: false 
     } 
    }] 
    }, 

    legend: { 
    display: false 
    }, 
    title: { 
    display: false, 
    } 
}

來源

2017-05-17 Matthieu Caron

的可能的複製[？如何刪除chart.js之軸的線/規則]（http://stackoverflow.com/questions/40522923/how-to-remove-在線圖表-JS） – Picard

@Picard雖然你可以推斷OP可能想刪除gr通過查看所需輸出圖像的idLine邊框，這不是這個問題所要求的，所以這不是重複的。這個問題的重點在於刻度標籤的位置。 –

可以更改刻度標記的位置，並獲得圖形看起來像你的第二個圖像，通過添加一些選項來配置。

首先，隱藏yAxes和xAxes網格線和用下面的代碼刻度標記：

gridLines: { 
    display: false, 
    drawBorder: false //hide the chart edge line 
}, 
ticks: { 
    display: false 
}

然後，基於關想法所示here，使用下面的動畫代碼到bar._model.label添加到上的頂酒吧：

animation: { 
    duration: 1, 
    onComplete: function() { 
    var chartInstance = this.chart; 

    ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 

    this.data.datasets.forEach(function(dataset, i) { 
     var meta = chartInstance.controller.getDatasetMeta(i); 
     meta.data.forEach(function(bar, index) { 

     var label = bar._model.label; 
     var xOffset = 10; 
     var yOffset = bar._model.y - 42; 
     ctx.fillText(label, xOffset, yOffset); 
     }); 
    }); 
    } 
}

動畫的jsfiddle演示：https://jsfiddle.net/actxg695/1/

如果你都還好用的標籤顯示了欄上，而不是在酒吧的頂部，而不是隱藏ticks和使用animation，你可以使用mirror:true翻轉的yAxes刻度標記：

ticks: { 
    mirror: true, 
    fontSize: 16, //make the font slightly larger 
    padding: -10 //move the text slightly away from the bar edge 
}

鏡子的jsfiddle演示：https://jsfiddle.net/actxg695/2/

來源

2017-05-18 06:52:22

它的工作原理！謝謝！ –

更改Chart.js打勾標籤的位置

回答

相關問題