英文:
How to set months of the last year in highcharts?
问题
我需要图表,该图表在当前月份(七月)结束。刻度应每3个月设置一次。但现在我的图表需要pointStart,它将时间限制在2022年10月到2023年7月(日期应仅限于2023年7月)。此外,我的图表未显示所有点(图表缺少最后4个值)。
你想要的效果如下图所示:
你可以在以下链接找到完整的代码:https://jsfiddle.net/njmb7uoL/
请注意,这是原始代码的翻译,如果你需要进一步的解释或帮助,请告诉我。
英文:
I need chart which ends in the current month (July). Ticks should be set each 3 months. But now my chart requires pointStart, which limits time from october 2022 to july 2023 (date should be limited only by july 2023). Also not all of my points are displayed (chart misses 4 last values).
https://jsfiddle.net/njmb7uoL/
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 1),
},
plotOptions: {
series: {
pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - 9),
pointInterval: 3,
pointIntervalUnit: 'month',
},
},
series: [{
name: 'Moose',
data:
[
38000,
37300,
37892,
38564,
68767,
73464,
83748,
34343,
]
}, {
name: 'Deer',
data:
[
22534,
23599,
24533,
25195,
45454,
74657,
32432,
34343,
],
}]
});
答案1
得分: 0
以下是您要翻译的内容:
这个示例基本上可以实现这个目标:区间的结束是当前月份,即2023年7月。区间的开始由数据的长度(第一列)确定,例如,对于提供的示例,开始日期是在2022年11月底。
let srs = [
[
38000,
37300,
37892,
38564,
68767,
73464,
83748,
34343,
],
[
22534,
23599,
24533,
25195,
45454,
74657,
32432,
34343,
]
];
let chart = Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
xAxis: {
tickInterval: 90 * 24 * 3600 * 1000, // 3个月
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 3),
},
plotOptions: {
series: {
pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - srs[0].length + 1),
pointInterval: 1,
pointIntervalUnit: 'month',
},
},
series: [{
name: 'Moose',
data: srs[0]
}, {
name: 'Deer',
data: srs[1],
}]
});
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This demo shows a smoothed area chart with an x-axis plot band
highlighting an area of interest at the last two points. Plot bands
and plot lines are commonly used to draw attention to certain areas or
thresholds.
</p>
</figure>
英文:
The following example should basically do it: The end of the interval is the current month, which is July 2023. The start of the interval is determined by the length of the data (first column), such that e.g. with the provided example the begin is at the end of November 2022.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let srs = [
[
38000,
37300,
37892,
38564,
68767,
73464,
83748,
34343,
],
[
22534,
23599,
24533,
25195,
45454,
74657,
32432,
34343,
]
];
let chart = Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
xAxis: {
tickInterval: 90 * 24 * 3600 * 1000, // 3 months
//startOnTick: true,
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 3),
},
plotOptions: {
series: {
pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - srs[0].length + 1),
pointInterval: 1,
pointIntervalUnit: 'month',
},
},
series: [{
name: 'Moose',
data: srs[0]
}, {
name: 'Deer',
data: srs[1],
}]
});
<!-- language: lang-css -->
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<!-- language: lang-html -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This demo shows a smoothed area chart with an x-axis plot band
highlighting an area of interest at the last two points. Plot bands
and plot lines are commonly used to draw attention to certain areas or
thresholds.
</p>
</figure>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论