英文:
How to show selected date on line chart plot with x axis in High chart if I have multiple value for single date
问题
我正在使用Highcharts，我是初学者，我需要在具有选定日期数组且每个日期有多个值时显示折线图。
例如我有：
date = [2022-01-02, 2022-01-07, 2022-01-10]
和
Data = [[1, 2, 3], [3, 5, 4], [6, 3, 4]]
我有一些参考资料，但是针对柱状图和单个数据：[https://jsfiddle.net/50e1nbac/4/][1]
[enter image description here][2]
在上面的图片中，我只需要在X轴上列出列表中的日期。
英文:
I am using Highchart , I am new for it , I need to show line chart when i have a selected date array and every date have multiple value.
For Example I have
date=[2022-01-02,2022-01-07,2022-01-10]
and
Data=[[1,2,3],[3,5,4],[6,3,4]]
I have some references but for column and single data : https://jsfiddle.net/50e1nbac/4/
In above picture I just need to mentioned date from list on X-axis.
答案1
得分: 0
以下是代码部分的翻译，不包括HTML和Demo链接：
For showing observation scatter series will be fit to visualize it how many times the action has occurred. You can insert the dates as categories, the points will refer to them.
要显示观察散点系列以可视化动作发生的次数。您可以将日期作为类别插入，点将与它们相关联。
var dates = ["2019-06-14 17:00:00", "2019-06-14 17:01:00", "2021-04-13 06:15:00"];
Highcharts.chart('container', {
title: {
text: 'Scatter plot with regression line'
},
xAxis: {
type: 'datetime',
categories: dates
},
yAxis: {
min: 0
},
series: [{
type: 'line',
name: 'Regression Line',
data: [
[0, 1.11],
[5, 4.51]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
marker: {
radius: 4
}
}]
});
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
以上是代码的翻译。
英文:
For showing observation scatter series will be fit to visualize it how many times the action has occurred. You can insert the dates as categories, the points will refer to them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var dates = ["2019-06-14 17:00:00", "2019-06-14 17:01:00", "2021-04-13 06:15:00"];
Highcharts.chart('container', {
title: {
text: 'Scatter plot with regression line'
},
xAxis: {
type: 'datetime',
categories: dates
},
yAxis: {
min: 0
},
series: [{
type: 'line',
name: 'Regression Line',
data: [
[0, 1.11],
[5, 4.51]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
marker: {
radius: 4
}
}]
});
<!-- language: lang-css -->
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
<!-- language: lang-html -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<!-- end snippet -->
Demo: https://jsfiddle.net/BlackLabel/9r07asom/
https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
https://api.highcharts.com/highcharts/xAxis.categories
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论