如何在highcharts中设置去年的月份?

huangapple go评论173阅读模式
英文:

How to set months of the last year in highcharts?

问题

我需要图表,该图表在当前月份(七月)结束。刻度应每3个月设置一次。但现在我的图表需要pointStart,它将时间限制在2022年10月到2023年7月(日期应仅限于2023年7月)。此外,我的图表未显示所有点(图表缺少最后4个值)。

你想要的效果如下图所示:

如何在highcharts中设置去年的月份?

你可以在以下链接找到完整的代码: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,
            ],
          
    }]
});

what I want to get:
如何在highcharts中设置去年的月份?

答案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(&#39;container&#39;, {
  chart: {
    type: &#39;areaspline&#39;
  },
  xAxis: {
    tickInterval: 90 * 24 * 3600 * 1000, // 3 months
    //startOnTick: true,
    type: &#39;datetime&#39;,
    dateTimeLabelFormats: {
      month: &#39;%b&#39;,
      year: &#39;%b&#39;
    },
    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: &#39;month&#39;,
    },
  },
  series: [{
    name: &#39;Moose&#39;,
    data: srs[0]
  }, {
    name: &#39;Deer&#39;,
    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 -->

&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/export-data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/accessibility.js&quot;&gt;&lt;/script&gt;

&lt;figure class=&quot;highcharts-figure&quot;&gt;
    &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
    &lt;p class=&quot;highcharts-description&quot;&gt;
        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.
    &lt;/p&gt;
&lt;/figure&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月10日 19:17:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76653188.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定