Y轴上的值消失（隐藏在标签下） [英] Values on Y-axis disappear (hide under labels)
问题描述
我使用ChartJS库创建折线图。不知何故，Y值的值几乎隐藏。
我想知道我是否有一组数据，我如何动态地创建y值，以便它不会隐藏我的y值，并且仍然会自动根据我的数据集选择进行缩放。
以下是
谢谢你的codepen，总是有助于有这些问题！
您可以通过添加以下比例选项来设置yAxis的最小值/最大值：
选项：{
响应：真，
比例：{
yAxes：[{
蜱：{
suggestedMin：69，
suggestedMax：73
}
}]
}
}
这是一个分叉的
更新2 =========================
$ b 对插件进行小改动，以便在隐藏一个数据集时，其他数据集居中并且图表适当地运行：
Chart.pluginService.register（{
beforeUpdate：function（chart）{
console.log（beforeUpdate）;
//获取自定义的偏移量
var offset = chart.options.customOffs等;
//如果偏移未定义或小于0，优雅地存在
if（！offset || offset< 0）return;
//预设最小和最大
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
//找到所有数据集的最小值/最大值
chart.data.datasets.forEach（function（dataset）{
if（！dataset._meta [0] .hidden ）{
console.log（dataset）
var newMax = Math.max.apply（null，dataset.data）;
var newMin = Math.min.apply（null，dataset.data ）;
max = newMax> max？newMax：max;
min = newMin> min？min：newMin;
}
}）;
//改变最小和最大刻度值
chart.options.scales.yAxes [0] .ticks.max = max + offset;
chart.options.scales.yAxes [0] .ticks.min = min - offset;
}
}）;
更新3 ================ =========
这里有一个插件可以为图表中的所有Y轴添加偏移量：
Chart.pluginService.register（{
beforeUpdate：function（chart）{
console.log（beforeUpdate）;
//获取自定义的偏移量
var offset = chart.options.customOffset;
//存在于偏移量未定义或小于0时优雅地存在
if（！offset || offset< 0）return;
var yAxes = chart.options.scales.yAxes;
for（var i = 0; i< yAxes.length; i ++）{
var axis = yAxes [i] ;
var datasets = chart.data.datasets;
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
var datasetsOnAxis = [];
for（var j = 0; j< datasets.length; j ++）{//添加数据这个坐标轴到数据集的坐标值OnAxis
var dataset =数据集[j];
var meta = chart.getDatasetMeta（j）;
if（meta.yAxisID === axis.id）datasetsOnAxis.push（dataset）; （var k = 0; k< datasetsOnAxis.length; k ++）{
var dataset = datasetsOnAxis [k]
var newMax = Math.max .apply（null，dataset.data）;
var newMin = Math.min.apply（null，dataset.data）;
max = newMax>最大？ newMax：max;
min = newMin> min？ min：newMin;
}
axis.ticks.max = max + offset;
axis.ticks.min = min - offset;
}
}
}）;
I use ChartJS library to create line chart. Somehow, the value on the Y values are almost hidden. I am wondering if I have set of data, how can I dynamically make y value so that it won't hide my y-value and still automatically scale base on my dataset selection.
And here is the CodePen
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000],
datasets: [
{
label: 'dataset 1',
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
data: [72, 72, 72, 72]
},
{
label: 'dataset 2',
fill: false,
backgroundColor: 'rgb(54, 162, 235)',
data: [70, 70, 70, 70]
}
]
},
options: {
responsive: true
}
});
.myChartDiv {
width: 600px;
height: 800px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="800"></canvas>
</div>
</body>
</html>
Thank you for the codepen, always helps to have these in a question!
You can set the min/max of the yAxis by adding the following scale options:
options: {
responsive: true,
scales:{
yAxes:[{
ticks:{
suggestedMin:69,
suggestedMax:73
}
}]
}
}
here is a forked CodePen
You can always calculate the min and max as (min - 1) and (max +1) respectively to always get have an offset of 1.
UPDATE: =================================
In you're CodePen, you are using Chartjs 2.1.3, which is now an old version. Here is how you can build a simple plugin to add an offset to the linear char min/max:
first the plugin:
// Define a plugin to provide data labels
Chart.pluginService.register({
beforeUpdate: function(chart) {
// get custom defined offset
var offset = chart.options.customOffset;
// exisit gracefully if offset not defined or less than 0
if(!offset || offset < 0) return;
// preset the min and max
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
// find min/max values of all datasets
chart.data.datasets.forEach(function(dataset){
var newMax = Math.max.apply(null, dataset.data);
var newMin = Math.min.apply(null, dataset.data);
max = newMax > max ? newMax : max;
min = newMin > min ? min : newMin;
});
// change min and max tick values
chart.options.scales.yAxes[0].ticks.max = max + offset;
chart.options.scales.yAxes[0].ticks.min = min - offset;
}
});
now you can add a customOffset property to options:
options: {
customOffset: 0.1,
responsive: true,
}
Take a look at this CodePen
sample preview with 0.5 offset with your data:
UPDATE 2 =========================
Small changes to plugin so that when one dataset is hidden, the others are centered and the chart behave appropriately:
Chart.pluginService.register({
beforeUpdate: function(chart){
console.log("beforeUpdate");
// get custom defined offset
var offset = chart.options.customOffset;
// exisit gracefully if offset not defined or less than 0
if(!offset || offset < 0) return;
// preset the min and max
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
// find min/max values of all dataset
chart.data.datasets.forEach(function(dataset){
if(!dataset._meta[0].hidden){
console.log(dataset)
var newMax = Math.max.apply(null, dataset.data);
var newMin = Math.min.apply(null, dataset.data);
max = newMax > max ? newMax : max;
min = newMin > min ? min : newMin;
}
});
// change min and max tick values
chart.options.scales.yAxes[0].ticks.max = max + offset;
chart.options.scales.yAxes[0].ticks.min = min - offset;
}
});
UPDATE 3 =========================
here is a plugin to add offset to ALL Y Axes in the chart:
Chart.pluginService.register({
beforeUpdate: function(chart){
console.log("beforeUpdate");
// get custom defined offset
var offset = chart.options.customOffset;
// exisit gracefully if offset not defined or less than 0
if(!offset || offset < 0) return;
var yAxes = chart.options.scales.yAxes;
for(var i=0; i<yAxes.length; i++){
var axis = yAxes[i];
var datasets = chart.data.datasets;
var max = Number.MIN_VALUE;
var min = Number.MAX_VALUE;
var datasetsOnAxis = [];
for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
var dataset = datasets[j];
var meta = chart.getDatasetMeta(j);
if (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset);
}
for(var k=0; k<datasetsOnAxis.length; k++){
var dataset = datasetsOnAxis[k]
var newMax = Math.max.apply(null, dataset.data);
var newMin = Math.min.apply(null, dataset.data);
max = newMax > max ? newMax : max;
min = newMin > min ? min : newMin;
}
axis.ticks.max = max + offset;
axis.ticks.min = min - offset;
}
}
});
这篇关于Y轴上的值消失（隐藏在标签下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
