更改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打勾标签的位置

回答

相关问题