文章/答案/技术大牛

发布

社区首页 >问答首页 >Plotly规范动态

问Plotly规范动态
EN

Stack Overflow用户

提问于 2020-05-28 17:58:24

回答 2查看 465关注 0票数 1

我有一个Plotly JS Gauge的问题，我不能解决，我已经尝试了一千种方法来解决它。

如何实时、动态地使用Plotly JS Gauge？

我试过了，但它不起作用。;-(：

<script>
    function rand() {
        return Math.floor(Math.random() * (250 - 0) ) + 0;
    }


    var data = [
                {
                    domain: { x: [0, 1], y: [0, 1] },
                    value: 0,
                    title: { text: "Speed" },
                    type: "indicator",
                    mode: "gauge+number"
                }
            ];

    var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
    Plotly.newPlot('myDiv', data, layout);

    var cnt = 0;
    var interval = setInterval(function() {
        Plotly.extendTraces('myDiv', {value: [[rand()]]}, [0])
        if(++cnt === 100) clearInterval(interval);
    }, 300);
</script>

plotly.js

real-time-data

javascript

plotly

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-28 23:05:19

尝试使用Plotly.update()

function rand() {
return Math.floor(Math.random() * (250 - 0) ) + 0;
}

var data = [
        {
            domain: { x: [0, 1], y: [0, 1] },
            value: 0,
            title: { text: "Speed" },
            type: "indicator",
            mode: "gauge+number"
        }
    ];

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
Plotly.newPlot('myDiv', data, layout);

var cnt = 0;
var interval = setInterval(function() {
Plotly.update('myDiv', {value: rand()}, {}, [0])
if(++cnt === 100) clearInterval(interval);
}, 800);

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

票数 1

Stack Overflow用户

发布于 2021-10-30 20:54:46

如果未在设置中固定，则仪表范围将在更新时到处移动。在数据对象中使用属性'gauge‘来完成以下操作：

gauge: {axis:{range: [null, 100]}}

例如，这会将其设置为最小值0和最大值100。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62061915

复制

相似问题

问Plotly规范动态
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Plotly规范动态EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Plotly规范动态
EN