Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在画布Html5的折线图中隐藏xAxis上的标签_Javascript_Html_Charts_Html5 Canvas_Linechart - Fatal编程技术网

Javascript 在画布Html5的折线图中隐藏xAxis上的标签

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

我正在实现折线图,我想从折线图中隐藏x轴标签。我放置了scaleFontSize:0,,x轴和Y轴标签被隐藏。但我只想隐藏x轴标签

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当然可以。它非常有用。如果我的问题对其他人有帮助,请投票:)完成!!­­­­­­­­­­­­­­­­­­­­