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屋!