如何动态调整Morris折线图y轴
动态调整Morris折线图的y轴可以通过以下步骤实现：
- 获取数据：首先，从数据库、API或其他数据源中获取需要展示的数据。这些数据可以是时间序列数据，例如销售额、用户数量等。
- 数据处理：对获取的数据进行处理，确保数据格式正确并符合Morris折线图的要求。例如，将数据转换为适当的格式，如JSON。
- 初始化折线图：使用Morris折线图的相关函数或库，初始化一个空的折线图，并指定需要展示的容器元素。
- 设置y轴范围：根据数据的最大值和最小值，动态计算y轴的范围。可以使用JavaScript的Math库中的函数来实现这一计算。
- 更新折线图：根据计算得到的y轴范围，更新折线图的配置。可以使用Morris折线图提供的函数来设置y轴的最大值和最小值。
- 刷新折线图：根据更新后的配置，刷新折线图以显示新的y轴范围。可以使用Morris折线图提供的函数来刷新图表。
以下是一个示例代码，展示了如何使用Morris折线图库动态调整y轴范围：
// 获取数据
var data = [
{ year: '2015', value: 100 },
{ year: '2016', value: 200 },
{ year: '2017', value: 150 },
{ year: '2018', value: 300 },
{ year: '2019', value: 250 }
];
// 初始化折线图
var lineChart = Morris.Line({
element: 'line-chart-container',
data: data,
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
// 计算y轴范围
var minValue = Math.min.apply(Math, data.map(function(d) { return d.value; }));
var maxValue = Math.max.apply(Math, data.map(function(d) { return d.value; }));
// 更新折线图配置
lineChart.options.ymin = minValue;
lineChart.options.ymax = maxValue;
// 刷新折线图
lineChart.redraw();这样，Morris折线图的y轴范围就会根据数据的最大值和最小值进行动态调整。请注意，以上示例仅为演示目的，实际应用中需要根据具体需求进行适当的修改和调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云数据库：https://cloud.tencent.com/product/cdb
- 腾讯云云服务器：https://cloud.tencent.com/product/cvm
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云存储：https://cloud.tencent.com/product/cos
- 腾讯云区块链：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
1回答
我正在尝试获得morris.js折线图的y轴的对数刻度。
我已经尝试过使用yLabelFormat选项，但它不是我需要的。任何提示都是值得感谢的。
如果使用morris.js无法做到这一点，您可以建议使用另一个轻量级javascript库来制作具有对数比例的简单折线图。
浏览 0提问于2014-06-20得票数 3
我已经使用Morris.js绘制了一些JSON数据。该图运行良好，但我正在尝试调整折线图中沿y轴的标签。
目前，morris.js使用JSON数据的值范围(其中x轴是时间)自动生成yLabels。在我的示例JSON中，值的范围是从54到-47，因此生成的yLabels是54、29、4、-22、-47。但是，我希望将这些值四舍五入为-50、-25、0、25和50。我也希望"0“线突出，希望有一个不同的颜色。
当我动态创建数据时，这些值不是固定的，在另一个图表中，值的范围可能在-2.5和+2.5之间(在这种情况下，我希望沿y轴的标签为-2.5，-1.25，0，1.25，2.5)。
如何舍入
浏览 0提问于2013-01-02得票数 4
我需要在我的Morris折线图中调整y轴。到目前为止，我所拥有的代码是：
Morris.Line({
element : 'chart_01',
data: [<?php echo $chart_data; ?>],
xkey: 'fecha',
ykeys: ['Precio'],
labels: 'Precio',
lineWidth: '6px',
xLabelAngle: 45
});
它看起来是这样的：
这就是我想要的图表，一旦y轴
浏览 5提问于2017-12-03得票数 1
回答已采纳
3回答
我已经开始在我的html页面中使用morris.js折线图了。有没有办法将y轴设置为只包含整数？现在它显示十进制数，但我的数据集只包含整数。
浏览 0提问于2013-09-02得票数 8
回答已采纳
1回答
我有两个不同范围的系列，我试图在折线图morris.js的两个y轴上以不同的比例将其绘制在两个范围内。这有可能吗？
我只能看到一个序列-1，因为数字小于serie_1，所以serie_2被绘制为值0。
new Morris.Line({
element: dest,
data:data,
xkey: 'date',
ykeys: ['serie_1','serie_2'],
labels: labels,
...
})
浏览 3提问于2015-07-27得票数 6
我使用的是Morris折线图，但我的y轴超过了100%。
下面是我的json数据：
[
{"y":"20/03","Threshold":"70","x TV":"0","x CA":"100","x Retail":"0","x Mobility":"100","x Media":"0"},
{"y":"21/03","Th
浏览 0提问于2016-03-23得票数 3
我使用的是morriz折线图。但它在x轴上以年为单位显示，我以为它是字符串，我试图修改它，但它没有发生。这是它现在显示的图像。 📷 下面是我现在使用的代码 new Morris.Line({
// ID of the element in which to draw the chart.
element: 'kt_morris_1',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [{
浏览 39提问于2021-01-01得票数 1
1回答
我已经在D3中画了一个折线图。我在x轴alignment.Fiddle 中遇到问题
var x = d3.scale.ordinal().rangeRoundBands([0, width], .2);
x.domain(dataset.map(function(d) {
return d.qName; }));
问题是-“点和x轴不在同一水平上”。(有一些移位可见))。如何将Q1移到X轴和Y轴的交点。在这方面的任何帮助都将受到高度的感谢。
浏览 0提问于2013-09-03得票数 0
我使用reactC3js模块来创建折线图，而不是动态加载y轴数据，y轴首先获取发送的数据，之后不会更新和重新呈现图表
浏览 14提问于2019-04-20得票数 1
回答已采纳
2回答
JavaFX LineChart由绘图区和轴组成。由于轴渲染使用了一些显示空间，因此折线图中原点的位置不是(0，0)。如何获得该位置相对于折线图本身的位置？
我想计算出绘图区中一个点相对于折线图位置的位置。X轴和y轴的getDisplayPosition方法提供了相对于原点的位置，但我没有看到一种明显的方法来获得原点位置。
浏览 1提问于2012-09-26得票数 1
回答已采纳
1回答
带核心图的折线图中特定位置的符号
、、、、
我想用核心图绘制折线图
我有带时间的x轴(1,2,3，...13,14...00)和带数字的y轴(0-50-100-150-200-...500)
现在，在每个坐标(x，y)处，我想把像圆一样的符号加上颜色
例如在x轴时间4'o时钟和y轴数字65处
在x轴-时间13'o时钟和y轴-数字25
在x轴-时间14'o时钟和y轴-数字15
在x轴-时间23'o时钟和y轴-数字5
因此，在每个(x，y)处放置符号，然后使用这些符号绘制直线
非常感谢
浏览 4提问于2011-06-06得票数 1
我已经创建了一个RDLC文件来查看报告，并且在其中有一个折线图。我想要动态设置图表的属性，如类别、X轴间隔、Y轴间隔、颜色等。我如何通过代码设置它们？我使用的是C#.Net。
谢谢你NLV
浏览 1提问于2010-02-05得票数 1
回答已采纳
嗨，最近我试了莫里斯地区图，它是好的。但很难理解这些数据是如何在那里获取的。
我看过文档 &我在这里制作了样例图
var data = [
{ y: '2014', a: 50, b: 90},
{ y: '2015', a: 65, b: 75},
{ y: '2016', a: 50, b: 50},
{ y: '2017', a: 75, b: 60},
{ y: '2018', a: 80
浏览 0提问于2019-04-06得票数 1
回答已采纳
4回答
我正在追随Railscast #223，尝试使用Morris.js和拉斐尔将一些简单的折线图添加到我的Rails 3.2.9站点中。我已经下载了拉斐尔和莫里斯javascript文件，并将它们添加到了vendor/assets/javascript文件夹中，然后将相关行添加到了application.js中：
//= require raphael
//= require morris
然后，我为图表创建了一个简单的HTML div：
<div id="annual"></div>
并在关联的javascript文件(tenants.js.coffee)
浏览 0提问于2013-02-01得票数 1
我有一张图，画出x轴的日期，在y轴上睡上几个小时。
如果我显示7天的数据，x轴显示每个日期和图形看起来很好：
当我将价值8周的数据放入图表中时，morris.js会自动调整x轴标签的精度，以显示更少的日期(很好！)但不对图点进行相同的调整，因此图如下所示：
如何使morris.js只在每个标签间隔上放置点？
下面是显示图形的代码：
$ ->
new Morris.Line(
element: 'naps_chart',
data: $('#naps_chart').data('naps'),
浏览 2提问于2014-05-08得票数 2
1回答
我有一个如下所示的数据框架，其中我希望将X轴上的"FREQ“值绘制为类型中每个类的折线图，并在Y轴上绘制总计数
ID FREQ TYPE
ID1 0.0827068 A
ID2 0.0827068 A
ID3 0.0150376 B
ID4 0.0075188 B
ID5 0.07838 C
ID6 0.0676692 C
我设法用下面的命令绘制了一个直方图：
ggplot(CNV.sort1, aes(x = FREQ,y=..density..,fill=TYPE)) + geom_histo
浏览 3提问于2016-06-11得票数 0
1回答
我有一个数据集，其中包含以下格式的数据:您在右侧看到的图形是SSRS报告中使用的折线图。这是您在下面看到的示例数据。SSRS报告中的图形包含按月的数据(而不是这里的按天)，我需要动态设置轴(Y轴编号)，以便当数字更改时，所述图形也会更新，而不需要手动更新Y轴。 我知道我可以设置折线图的垂直轴属性，然后转到" minimum“，并编写一个表达式来带来最小的一列，但我不确定如何处理3列的最小函数(即5年以下，5-10年和10+年) TL;DR:我需要更改垂直轴，以使最后3列的最小值为-5 (如下图所示)，并再次为这些列带来最大+5值。因此，最小值应为-5 (即0-5)，最大值应为48 (
浏览 19提问于2021-01-10得票数 0
我想在MS-Charts的折线图中使用多个Y轴。
我在折线图中有多个序列。现在，我想展示一些关于Y轴的系列和其他关于Y2轴的系列。
有人能建议我如何实现这一点吗？
浏览 1提问于2012-11-29得票数 2
回答已采纳
我这里有一个堆栈闪电战-
我有一个带填充值的折线图。
我希望y轴从200开始-最小值
我可以这样在y.domain上设置它
y.domain([200, d3.max(data, function(d) {
return d.value;
})]);
如何使用d3.min动态执行此操作？
浏览 6提问于2018-09-06得票数 0
回答已采纳
我想要一些面积图方面的帮助。如果序列值不是0.0，则图表的最小值始终设置为0，并且它正确地位于图表的底部(即y轴)：
我试着设置
Y轴上的{ min: 0，minPadding:0 }，但它不工作。显然，我不能设置最大值，因为我有一个动态数据。我该如何解决这个问题呢？
我已经在折线图中尝试了上述情况，它工作正常，但不是在面积图中？
浏览 2提问于2016-03-08得票数 0
1回答
我想在Morris线图中的直线点上显示y轴值。我在莫里斯做不到这一点。
<body>
<div id="line-example"></div>
</body>
脚本
var morris = Morris.Line({
element: 'line-example',
data: data,
xkey: 'date',
ykeys: ['Data_Error','Data_Success'],
labels: [&#
浏览 2提问于2016-08-05得票数 3
我尝试使用JQPLOT实现折线图。我想禁用在代码中动态构建的X轴值。我能够在Jqplot.min.css中隐藏Y轴，并且我想对X轴执行同样的操作。有没有人能提个建议？
任何其他给出我们自己的X轴值的逻辑都是非常感谢的。
谢谢
浏览 0提问于2013-06-05得票数 0
3回答
我已经使用了jqplot折线图。我已经使用ajax.In从php页面获取数据，一些条件我将显示特定的series.So
如何在jqplot折线图中动态传递序列并设置序列的图例？
我已经手动编写了上述要求的代码。我已经应用在图例系列上的点击事件，并根据点击图例绘制图形。
我还根据选择/取消选择系列图例更改了y轴值。
浏览 1提问于2012-12-20得票数 3
我有数据在excel中，是按人，日期和小时排序的。我需要制作一个x轴是时间，y轴是小时的折线图，并根据部门添加几个折线图。我知道哪些人在哪个部门，但我不知道如何绘制x轴是时间的折线图。
浏览 4提问于2016-05-23得票数 0
1回答
我在使用Morris.js时遇到了格式问题。当我使用条形图时，数据的格式很好，但是当我切换到折线图时，格式就有点滑稽了。唯一的问题是月份的折线图，每日和每年的格式都很好。
如何修复我的折线图上的格式？
AJAX月度代码：
$("#m-t-sales").click(function(){
document.getElementById("total-sales").innerHTML = "";
$(this).addClass("active");
$("#d-t-sales").re
浏览 1提问于2018-02-24得票数 0
我下载了visual Studio2008版的MSchart.exe。当我选择图表控件时，它只显示条形图，但我想用X轴和Y轴实现折线图。
考虑y轴上的值是mm，从1到1400值range.On x轴日期/时间。
我是这个图表控件的新手，如何在webforms中使用图表控件创建折线图？
有什么建议吗？
浏览 4提问于2012-04-30得票数 0
我正在构建一个小的多重折线图在Highcharts中。我正在从google sheets中动态地拉取数据。Y轴的刻度标记不同，我想将它们设置为从-8到8(客户端请求)。 我尝试过tickPositions：-8，-6，-4，-2，0，2，4，6，8，各种tickFormatter函数，似乎都不起作用。我拉入的数据似乎覆盖了我试图做的一切。 如何在highcharts中设置自己的开始和结束刻度位置？或者更好的是，我如何在highcharts的y轴上设置特定的刻度？
浏览 38提问于2020-06-10得票数 1
回答已采纳
1回答
我使用以下选项制作了一个google折线图。
var options = {
pointSize: 10,
pointShape: 'circle',
backgroundColor: '#FFFFFF',
legend: {position: 'none'},
vAxis: {
viewWindowMode: 'explicit',
浏览 1提问于2016-05-30得票数 0
我正在使用Dojo Charts创建一些折线图，这就是图表的外观。
此id chartData: 0,0,0,0,65,223
当我使用Chart.js创建图形时，它的呈现方式如下所示
忽略x轴和其他东西，如果我们看y轴，这些值在chart.js中是四舍五入的，与dojo图表相比看起来要好得多。有没有在dojo图表中实现相同功能的选项？
浏览 1提问于2015-07-22得票数 0
我有如下图所示的折线图 ? 我使用下面的代码来设置x轴标签： xAxis: [
{
type: 'datetime',
dateTimeLabelFormats:{
day: '%d %b %Y' //ex- 01 Jan 2016
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
labels: {
rotation: -45
}
}
] 有没有办法在x轴上显示日期和时间间隔？目前，它仅在x轴上显示时间。
浏览 11提问于2019-12-26得票数 0
回答已采纳
有没有办法在Kendo ui中动态添加多个垂直轴到折线图中？现在，我在kendo ui折线图中使用以下两个垂直轴的代码片段
valueAxes: [{
name: "test",
color:"#07eeff",
labels: {
format: "{0}pu"
}
}, {
name: "test1",
color:"#07eeff",
浏览 2提问于2014-06-04得票数 0
我做的是折线图和饼图，但我需要在y轴上用阿拉伯语绘制。
$('button').on('click', function(e) {
$('#pie-chart3').empty();
var type = $(this).data('type')
//data for month
, month = [
{label: 'English', value: 3
浏览 0提问于2019-06-20得票数 2
在这个实时代码链接中，
如果添加chart.yRange([0, 300])来反转y轴，则x轴将向上移动并停留在顶部(靠近图例)。
有什么可能的解决方法吗？
PS:问题出在该页面上的大多数图表上，但“累积折线图”最接近我的用例。
浏览 0提问于2014-04-01得票数 0
1回答
我正在尝试使用morris.js来生成折线图。我正在关注下面的铁路广播-
我有一个控制器，用hello方法打招呼。我在morris的网站上使用了下面的例子。
根据视频中的说明，我已经- 1.下载了莫里斯和拉斐尔的未压缩版本，并将其添加到/vendor/assets/javascripts中2.在application.js中包含了" /= require &/=require morris“3.将莫里斯的示例复制到greetings.js.coffee中，并将代码更改为coffeescript
jQuery ->
Morris.Line
element:
浏览 0提问于2016-05-23得票数 0
我想从Ajax成功返回中将动态数组数据传递给Morris Charts。
我是来获取折线图的所有数据的。
如何使用这段代码在this.createAreaChartDotted参数中发送data.json和data.y？
!function($) {
"use strict";
var MorrisCharts = function() {};
//creates area chart with dotted
MorrisCharts.prototype.createAreaChartDotted = function(element, p
浏览 0提问于2018-06-27得票数 0
1回答
我是chart.js的新手，我需要在y轴上创建一个带有标签的折线图。网上有很多在x轴上有标签的例子，但我需要的是一个在y轴上有标签，x轴上有数字的折线图？
浏览 4提问于2020-04-20得票数 0
6回答
我正在寻找一个类似于下图的多轴折线图(这是一个由amcharts制作的javascript图表)。
excel有没有用图表画出这些线的选项？请注意，有3个Y轴和3个折线图可用于比较数据。
是否有可能获得3个以上的数据点，每个数据点在一个图表上都有唯一的轴？
浏览 0提问于2013-06-20得票数 11
回答已采纳
如何在如图所示的折线图中从左y轴和右y轴设置填充？数据的范围从1到n点。可见的x轴范围最多为5个点。
浏览 5提问于2017-01-23得票数 1
1回答
我的文件中有以下json字段-
message:
{"File":"File1","Hour":"22","Count":"493"}
{"File":"File1","Hour":"23","Count":"32"}
{"File":"File3","Hour":"1","Count":"45"}
我正在尝试
浏览 13提问于2016-08-30得票数 0
1回答
我必须绘制一个折线图，X和Y轴的范围是实数(例如，-n到n都是浮点值).How我可以手动设置values.And吗?这应该是动态chart.Actually im提前从串口frequently.Thanks获取数据。
浏览 0提问于2011-08-31得票数 2
回答已采纳
0回答
基于给定参数SSRS生成的折线图
、、、、
对于下面的查询，我有一个折线图。
Select Date
,Time
,MaxValue
,MinValue
from MyTabl
where product = @Product
and (Date between @FromDate and @ToDate)
对于折线图，添加一个参数Interval(Values - 2, 4 ,8, 12, 24)。
我想根据参数选择以不同的方式显示折线图数据点。
现在，它返回50行，其中在折线图中，我为date,time映射了x轴，为MaxValue映射了y轴。它仍然显示所有时间间隔的相同图形
如何在折线图中包
浏览 6提问于2017-01-05得票数 0
回答已采纳
1回答
我正在尝试在Excel中绘制折线图。
我将x轴设置为一个恒定范围，但我正在尝试将y轴设置为一个可变范围。我的数据是B2-F2，B3-F3，B4-F4，B5-F5，B6-F6，B7-F7。我想用固定的X轴范围将它们分别绘制为Y轴，但不知道如何将Y轴数据变为可变数据。
我得到了6个以B2-F2为Y轴的图。
这就是我到目前为止所知道的：
Dim rowno As Integer
Dim colno As Range
Dim time As Range
Dim pressure As Range
Dim Startrow As Integer
Dim Lastrow As Integer
Start
浏览 1提问于2015-03-14得票数 1
我最近听说了Morris.js，并试图在我正在工作的一个网站中包含一个折线图。但是，每当我将日期数组中的元素提供给Morris.line()的data组件时，图形不能正确显示，而是显示了一堆奇怪的日期。
我的JS代码的相关片段如下所示：
Morris.Line({
element: 'line',
data: [
{ d: {{ dates.0 }}, v: {{ polar.0 }}},
{ d: {{ dates.1 }}, v: {{ polar.1 }}},
浏览 0提问于2014-07-24得票数 0
我正在试着画一个折线图，但我要求x和y轴的比例是y单位2对x单位1的正方形。
换句话说
Y轴上的单位读数2与x轴上的读数1的距离应该相等
我已将画布的宽度和高度设置为100%
我有以下几点
ticks: {
beginAtZero: true,
scaleStepWidth:1,
stepSize: 1,
scaleSteps:7,
steps: 7
}
and
ticks: {
beginAtZero: true,
scaleStepWidth:1,
stepSize: 1,
scaleSteps:14,
steps: 14
}
在许多其他尝试
浏览 5提问于2017-01-13得票数 2
1回答
我想对没有显示X轴标签的角度使用KendoUI折线图。我尝试编辑现有的示例，其中的代码如下：
k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind&
浏览 0提问于2014-07-30得票数 0
1回答
我使用jfreechart库来绘制动态变化的折线图，所以我关闭了轴自动缩放。放大轴后，自动缩放仍处于禁用状态。问题是当我缩小的时候，axes自动缩放打开了，它减慢了我的程序(因为它是动态变化的)。我应该如何添加侦听器，以便在缩小后关闭轴自动缩放？
浏览 3提问于2014-05-18得票数 0
1回答
目前，我有一个Line & Clustered列。有没有一种方法可以使折线图和条形图成为折线图？我想要一个既有x轴又有y轴的折线图。
浏览 2提问于2016-02-27得票数 0
1回答
如何在WPF工具包折线图中交换轴线？我有以下xaml：
<chartingToolkit:Chart Name="lineChart" Title="Line Series Demo" Margin="0,0,0,0">
<chartingToolkit:LineSeries DependentValuePath="Key" IndependentValuePath="Value" ItemsSource="{Binding}" IsSelectionEnabled=
浏览 3提问于2012-01-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
