javascript - 使用 morris.js 从图表上的网格中删除标签文本
问题描述
我正在使用morris.js 库来生成图表。
我想从图表中删除标签。请检查下面的图片以更好地理解。我怎样才能删除它们?
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [{
year: '2008',
value: 20
},
{
year: '2009',
value: 10
},
{
year: '2010',
value: 5
},
{
year: '2011',
value: 5
},
{
year: '2012',
value: 20
}
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>
解决方案
要禁用沿 x 和 y 轴绘制,请将axes
选项设置为false
:
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
// Disable drawing the x and y axes
axes: false
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>
要将 x 和 y 轴放在那里(例如用于解析目的),但使它们对用户不可见,请将gridTextSize
选项设置为0
:
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
// Make the x and y axes present, but small enough the user won't see it
gridTextSize: 0
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>
推荐阅读
- python - Windows 10 中缺少 Windows 安装程序 core.msi
- ffmpeg - 如何使用 FFmpeg 向 HLS 播放列表添加字幕?
- pine-script - Pinescript:如何在条形下方/上方设置一定距离的绘图形状标签?
- swift - 带有“|”的 Xcode Swift URL 特点
- pine-script - Tradingview 在振荡器上绘制
- delphi - 我正在尝试替换加载到 TChromium 的 PDF 文件中的工具提示占位符 $i18n{tooltipZoomOut}
- typescript - Typescript - 基于参数可选属性的条件返回类型
- c++ - 重载函数模板
- c++ - c ++互斥锁不会从内部阻止代码,但允许从外部阻止它
- azure-log-analytics - Azure Sentinel - 如何将 ESET 日志获取到 eset_CL