>我正在实现折线图,我想从折线图中隐藏 x'Axis 标签。我把 scaleFontSize: 0, , 比 x'Axis 和 Y'axis 标签是隐藏的。但我只想隐藏 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);
我正在参考 http://www.chartjs.org/docs/#line-chart-introduction。我只想隐藏 A'轴标签。我在堆栈溢出中看到了一个链接 删除图表中的 x 轴标签/文本.js。但我仍然无法修复。谢谢
您必须将
图表(实例)的scale.xLabels
属性设置为空数组 - []
(隐藏 x 轴网格线)或$scope.myNewChart.scale.xLabels.map(e => '')
(显示 x 轴网格线)以隐藏 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: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
myNewChart = new Chart(ctx).Line(lineData, lineOptions);
myNewChart.scale.xLabels = []; //or set -> myNewChart.scale.xLabels.map(e => '');
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="departuresChart2"></canvas>