个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我想制作一个 Highchart(基本折线图)，它可以在 x 轴上具有多个值。
我正在尝试制作一个包含值(y 轴)与日期(x 轴)的折线图。问题是可能有多个值或特定日期。我是 Highcharts 的新手，但我浏览了 API，但没有找到一种方法来绘制具有多个值(在 y 轴上)与 x 轴图的图表。我希望日期采用“06july”格式。
这是我的代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#g1').highcharts({
chart:{
polar:true,
backgroundColor:'#E9BE51'
} ,title: {
text: 'Cholesterol',
x: -20 //center
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
//type: 'date'
},
yAxis: {
title: {
text: 'Value(mmol/L)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'in'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [ {
name: 'Total',
data: [{ name:'jan' , y:12} , {name:'jan' , y:8.2}, {name:'mar' , y:10.2} , {name:'apr' , y:14.5}]
}/*, {
name: 'LDL',
data: [['jan',3.9],[ 'feb', 4.2],['mar', 5.7],['apr', 8.5] ]
}, {
name: 'HDL',
data: [['jan',4.9], [ 'feb',4.0], ['mar',4.5],['apr', 6]]
}*/]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<div class="container" id="g1" style="width: 50%; height: 50%; margin: ; "></div>
</body>
最佳答案
要为单个 x 值设置多个 y 值，只需在制作系列时专门指定 x 值。对于行和日期时间的工作方式相同。
对于 type: 'line' 你可以这样做 ( JSFiddle ):
data: [[0, 7.0], [0, 10.0], 6.9, 9.5, 14.5, [3, 15.0], 18.2, 21.5, 25.2, 26.5, 23.3, [8, 10.0], 18.3, 13.9, 9.6]
对于类型:'datetime'，您可以这样做( JSFiddle ):
data: [
...
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 1, 23), 1.5],
...
]
并使用dateTimeLabelFormats以特定方式显示日期。请参阅this answer for format explanation 。代码可能是这样的( same JSFiddle above ):
dateTimeLabelFormats: {
month: '%d%B'
}
关于jquery - Highcharts(基本折线图)与 x 轴相比可以有多个值吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25010320/
28
4
0
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。 折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。 折
我是 d3 和 typescript 的新手。 我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。 但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割 一个表达式 - 每天创建的任
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。 这是数据库的结构: enter image description here 这是代码: public clas
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。 在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。 以下是用于制作上述图表的部分数据(列
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。 在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间 这两个图都是使用 python 中的 pyplot 库创
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 6 年前。
<% function table2(total,table_x,table_y,all_width,all_height,line_n
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。 不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？ 最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。 搜索后没有信息，这与在 .
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。 目前，我只是尝试使用网络服务中
我是一名优秀的程序员,十分优秀！