Chart.js 将非零值作为水平条形图的中点?

Chart.js 将非零值作为水平条形图的中点?,chart.js,Chart.js,在Chart.js 2.x中,是否有任何方法可以制作水平条形图,使条形图向左或向右的中点不为零 我的数据都是1-10个值,但是我想让数值小于5的条向左,数值大于5的条向右 我已经通过将值更改为-5到5来解决问题,但是x轴显示为-5到5,工具提示显示“转换”值。。。我都不想要 我想做的事可能吗 谢谢 Scott如我在上面的评论中所述,采用您的解决方法并使用您可以将勾号值转换为其原始值: var origData=[1,3,7,8,10]; var原点=5; var图表数据={ 标签:['A','

在Chart.js 2.x中,是否有任何方法可以制作水平条形图,使条形图向左或向右的中点不为零

我的数据都是1-10个值,但是我想让数值小于5的条向左,数值大于5的条向右

我已经通过将值更改为-5到5来解决问题,但是x轴显示为-5到5,工具提示显示“转换”值。。。我都不想要

我想做的事可能吗

谢谢


Scott

如我在上面的评论中所述,采用您的解决方法并使用您可以将勾号值转换为其原始值:

var origData=[1,3,7,8,10];
var原点=5;
var图表数据={
标签:['A','B','C','D','E'],
数据集:[{
标签:“值”,
背景颜色:“rgba(0,20250,0.6)”,
边框颜色:“rgba(0,20250,0.9)”,
数据:origData.map(函数(值){返回值原点;}),
}]
};
var ctx=document.getElementById(“myChart”).getContext(“2d”);
var myBar=新图表(ctx{
键入:“水平线”,
数据:图表数据,
选项:{
图例:{
显示:假
},
比例:{
雅克斯:[{
颜色:“红色”,
类型:'类别',
}],
xAxes:[{
网格线:{
颜色:“黑色”,
borderDash:[5,10],
zeroLineColor:“红色”
},
滴答声:{
最小:-5,
最高:5,
回调:函数(值、索引、值){
返回值+原点;
}
}
}],
}
}
});

如我在上面的评论中所述,采用您的变通方法并使用您可以将勾号值转换为其原始值:

var origData=[1,3,7,8,10];
var原点=5;
var图表数据={
标签:['A','B','C','D','E'],
数据集:[{
标签:“值”,
背景颜色:“rgba(0,20250,0.6)”,
边框颜色:“rgba(0,20250,0.9)”,
数据:origData.map(函数(值){返回值原点;}),
}]
};
var ctx=document.getElementById(“myChart”).getContext(“2d”);
var myBar=新图表(ctx{
键入:“水平线”,
数据:图表数据,
选项:{
图例:{
显示:假
},
比例:{
雅克斯:[{
颜色:“红色”,
类型:'类别',
}],
xAxes:[{
网格线:{
颜色:“黑色”,
borderDash:[5,10],
zeroLineColor:“红色”
},
滴答声:{
最小:-5,
最高:5,
回调:函数(值、索引、值){
返回值+原点;
}
}
}],
}
}
});


您可以与您的解决方案一起使用您可以与您的解决方案一起使用谢谢@beaver--我来试一试。@ScottM-我的解决方案适合您吗?我还没有机会尝试。。。现在,我正在将数据转换为-5到5,只是隐藏xAxes标签和工具提示。是的,但是如果代码片段的结果(以及我的解释)是好的,你可以接受并投票决定答案。我今天将尝试一下。谢谢@beaver--我将试一试。@ScottM-我的解决方案适合你吗?我还没有机会尝试它。。。现在,我将数据转换为-5到5,只是隐藏xAxes标签和工具提示。是的,但是如果代码片段的结果(以及我的解释)是好的,你可以接受并投票决定答案。今天我将尝试一下。