gpt4 book ai didi

label - 莫里斯 donut chart 。很长很小的标签

转载 作者:行者123 更新时间:2023-12-04 16:11:36 37 4
gpt4 key购买 nike

我的莫里斯 donut chart 上有很长的标签。
由于它们很长,所以很难阅读。

当我将鼠标悬停在该文本上时,我希望有某种带有标签的弹出窗口。但是没有 css 类来绑定(bind)处理程序。

js代码:

Morris.Donut({
element: 'donut-example',
data: [
{label: "Download SalesD DDDDDDDDDDDDDDDDD", value: 12},
{label: "In-Store Sales AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", value: 30},
{label: "Mail-Order Sales VVVVVVVVVVVVVVV", value: 20}
]
});

我试过格式化程序,但这不是解决方案。

请给我一些帮助。

Here is example

最佳答案

很长一段时间没有任何答案后,我决定发布我自己的解决方案。我没有完全按照我的要求去做,但提供了可读的解决方案。

它是用 donut 下方的标签完成的,而不是在 donut 圈内。

Here is working solution on JS Bin

您可以在下面看到在应用程序中工作的屏幕截图:

enter image description here

这是代码:

JS:

Morris.Donut({
element: 'morrisDonutChart',
data: [
{label: "Download SalesD DDDDDDDDDDDDDDDDD", value: 12},
{label: "In-Store Sales AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", value: 30},
{label: "Mail-Order Sales VVVVVVVVVVVVVVV", value: 20}
]
});


$( "#morrisDonutChart" ).mouseover(function() {
prepareMorrisDonutChart();
});

$( document ).ready(function() {
prepareMorrisDonutChart();
});

function prepareMorrisDonutChart() {
$("#morrisDonutChart tspan:first").css("display","none");
$("#morrisDonutChart tspan:nth-child(1)").css("font-size","40px");

var isi = $("#morrisDonutChart tspan:first").html();
$('#morrisDonutChartSpan').text(isi);
}

HTML 头:
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

HTML 正文:
  <div id="morrisDonutChart"></div>
<div class="alert alert-info" role="alert">
<span id="morrisDonutChartSpan"></span>
</div>

我希望这会帮助某人。

关于label - 莫里斯 donut chart 。很长很小的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31207606/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com