个人中心
gpt4 book ai didi

javascript - 海图.js : scrollable innterText?

转载 作者：太空宇宙 更新时间：2023-11-04 09:25:52 25 4
gpt4 key购买 nike

基于this的代码Highchart 示例，当单击某个图 block 时，我想在 donut 圈的中心显示一些文本。现在是否可以使显示的文本在不能很好地适合圆圈的内部区域时可滚动？

到目前为止我有什么

$(function () {
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'vacation-time-chart',
            type: 'pie',
            height: 300,
            width: 300,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: {
      formatter: function() {
                     return '<b>'+this.y+'</b>';
                    }
                },
        plotOptions: {
            pie: {
                borderWidth: 6,
                startAngle: 90,
                innerSize: '75%',
                size: '100%',
                shadow: true,
                // {
                //     color: '#000000',
                //     offsetX: 0,
                //     offsetY: 2,
                //     opacity: 0.7,
                //     width: 3
                // },
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                events: {

                    click: function(){
                        this.series.chart.innerText.attr({text: this.txt});
                    }
                }
                }
            }
        },

        series: [{
            data: [
                {y:40, color: colors[0], txt: 'yoyo'},
                {y:10, color: colors[1],  txt: 'dada'},
                {y:60, color: colors[2],  txt: 'this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.'}
            ]
            // data: [
            //     ['Firefox',   44.2],
            //     ['IE7',       26.6],
            //     ['IE6',       20],
            //     ['Chrome',    3.1],
            //     ['Other',    5.4]
            // ]
        }]
    },
     function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
        var boundingBox;
        var series = chart.series[0];
        var zones;

    // Render the text
    chart.innerText = chart.renderer.label('Articles mentioning XY', 135, 125).add();
    boundingBox = chart.innerText.getBBox();
    chart.innerText.css({
            display:"inline-block",
            position:"absolute",
            top:"1px",
            width: "150px",
            height:"30px",
            color: '#4572A7',
            fontSize: '12px',
            overflow: 'auto',
            textAlign: 'block'

      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            x: series.center[0] - boundingBox.width / 2 + chart.plotLeft / 2,
            y: series.center[1] + boundingBox.height / 2 + chart.plotTop,
            zIndex: 999
        }).add();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>

<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
<script src="testfile.js"></script>

</body>
</html>

谁能帮我解决这个问题？将 overflow: auto(或滚动)添加到 innterText.css 属性似乎不是这里的解决方案。

最佳答案

你可以这样做，

function defineInnerData(name, y, obj) { // on complete
        var chart=$("#container").highcharts();       
        $( "#pieChartInfoText" ).remove();       
        var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
        var textY = chart.plotTop  + (chart.plotHeight * 0.5);
        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;left: 235px;top:210px;width: 130px;">';
        span += '<span style="font-size: 15px">'+ y +'</span><br>';
        span += '<span style="font-size: 12px">'+ name +'</span>';
        span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5)); 

    }
    defineInnerData("", "Tap the slices of this chart to see more");

并在里面调用它，

series: {
        cursor: 'pointer',
        point: {
          events: {
            mouseOver: function() {
              console.log(this)
              defineInnerData(this.name, this.y, this);
            }
          }
        },

DEMO

关于javascript - 海图.js : scrollable innterText?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41091317/

25 4 0
文章推荐： python - 统计Python中的事件数
文章推荐： java - 检测并从 JSON 对象中删除冗余节点，保存核心结构
文章推荐： python - 我只需要附加那些在 pyspark 数据框中具有非空值的人
文章推荐： javascript - Java - SendRedirect 不从对话框重定向
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com