javascript 如果单个日期有多个值,如何在高值图中的x轴折线图上显示选定日期

6jygbczu  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(90)

我正在使用Highchart,我是新来的,我需要显示折线图时,我有一个选定的日期数组,每个日期有多个值。例如,我有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/
enter image description here
在上面的图片中,我只需要从X轴列表中提到日期。

yfjy0ee7

yfjy0ee71#

为了显示观察散点系列将适合可视化它多少次的行动已经发生。您可以插入日期作为类别,点将引用它们。

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;
}
<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>

演示:https://jsfiddle.net/BlackLabel/9r07asom/
https://www.highcharts.com/docs/chart-and-series-types/scatter-charthttps://api.highcharts.com/highcharts/xAxis.categories

相关问题