Javascript 在画布Html5的折线图中隐藏xAxis上的标签
我正在实现折线图,我想从折线图中隐藏x轴标签。我放置了scaleFontSize:0,,x轴和Y轴标签被隐藏。但我只想隐藏x轴标签Javascript 在画布Html5的折线图中隐藏xAxis上的标签,javascript,html,charts,html5-canvas,linechart,Javascript,Html,Charts,Html5 Canvas,Linechart,我正在实现折线图,我想从折线图中隐藏x轴标签。我放置了scaleFontSize:0,,x轴和Y轴标签被隐藏。但我只想隐藏x轴标签 var lineOptions = { ///Boolean - Whether grid lines are shown across the chart scaleShowGridLines : true, //String - Colour of the grid
var lineOptions = {
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.4,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var lineData = {
labels: data,
datasets: [
{
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
}
]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
$scope.myNewChart = new Chart(ctx).Line(lineData, lineOptions);
var lineOptions={
///布尔值-是否在图表中显示网格线
scaleShowGridLines:对,
//字符串-网格线的颜色
scaleGridLineColor:“rgba(0,0,0,05)”,
//Number—网格线的宽度
scaleGridLineWidth:1,
//布尔-点之间的直线是否弯曲
贝塞尔曲线:对,
//数字-点之间贝塞尔曲线的张力
Bezier曲线长度:0.4,
//布尔值-是否为每个点显示点
是的,
//Number-每个点的半径(以像素为单位)
点半径:4,
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1,
//数字-添加到半径的额外数量,以满足绘制点外的命中检测
PointHit检测半径:20,
//布尔值-是否显示数据集的笔划
datasetStroke:对,
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2,
//布尔值-是否用颜色填充数据集
datasetFill:true,
//布尔-在页面上重新绘制图表调整大小
回答:是的,
//字符串-图例模板
legendTemplate:“
”
};
变量lineData={
标签:数据,
数据集:[
{
pointHighlightStroke:“rgba(151187205,1)”,
数据:[]
}
]
};
var getElement=document.getElementById(“departuresChart2”);
var ctx=getElement.getContext(“2d”);
$scope.myNewChart=新图表(ctx).Line(lineData,lineOptions);
我是在参考。
我只想隐藏一个轴标签。我在stackoverflow中看到了一个链接。但我仍然无法修复。感谢您必须将图表(实例)的
scale.xLabels
属性设置为空数组-[]
(隐藏x轴网格线)或$scope.myNewChart.scale.xLabels.map(e=>”)
(显示x轴网格线),以隐藏x轴标签
示例
var lineOptions={
//布尔值-是否在图表中显示网格线
scaleShowGridLines:对,
//字符串-网格线的颜色
scaleGridLineColor:“rgba(0,0,0,05)”,
//Number—网格线的宽度
scaleGridLineWidth:1,
//布尔-点之间的直线是否弯曲
贝塞尔曲线:对,
//数字-点之间贝塞尔曲线的张力
Bezier曲线长度:0.4,
//布尔值-是否为每个点显示点
是的,
//Number-每个点的半径(以像素为单位)
点半径:4,
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1,
//数字-添加到半径的额外数量,以满足绘制点外的命中检测
PointHit检测半径:20,
//布尔值-是否显示数据集的笔划
datasetStroke:对,
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2,
//布尔值-是否用颜色填充数据集
datasetFill:true,
//布尔-在页面上重新绘制图表调整大小
回答:是的,
//字符串-图例模板
legendTemplate:“
”
};
变量lineData={
标签:[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”],
数据集:[{
标签:“我的第二个数据集”,
填充颜色:“rgba(151187205,0.2)”,
strokeColor:“rgba(151187205,1)”,
点颜色:“rgba(151187205,1)”,
数据:[28,48,40,19,86,27,90]
}]
};
var getElement=document.getElementById(“departuresChart2”);
var ctx=getElement.getContext(“2d”);
myNewChart=新图表(ctx).Line(lineData,lineOptions);
myNewChart.scale.xLabels=[]//或set->myNewChart.scale.xLabels.map(e=>“”)代码>
请告诉我们小提琴或图片有什么问题。@artgb。我做不到。因为我不能公开我的代码。但我将提供屏幕快照您使用的是哪个版本的chart.js?@GRUNT我使用的是哪个版本,下面这一个是您的图表语法看起来像您发布的吗?@GRUNT谢谢您的回答。@GRUNT当然可以。它非常有用。如果我的问题对其他人有帮助,请投票:)完成!!