我正在使用morris.js library生成图表。
我想从图表中删除悬停图例。请检查下面的图片以获得更好的理解。如何删除它们?有解决的办法吗?提前致谢。
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>
最佳答案
若要禁用悬停图例,请使用hideHover
属性并将其设置为'always'
。hideHover
属性接受以下值:false
(布尔值)-始终显示悬停图例true
(布尔值)或'auto'
(字符串)-仅当鼠标光标在图表上方时才显示悬停图例'always'
(字符串)-从不显示悬停图例
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'],
// Remove hover legend
hideHover: 'always'
});
<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>
您还可以通过将
callback
函数分配给hoverCallback
属性来自定义悬停图例: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'],
// Customized hover legend via a callback
hoverCallback: function (index, options, content, row) {
return 'Legend ' + index + '<br> on year ' + row.year + '<br> with value ' + row.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>
Check out the morris.js API for line & area charts
关于javascript - 使用morris.js从条形图中删除悬停图例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51133544/