highchart中不相关的图表线答案

【问题标题】：Irrelevant graph lines in highcharthighchart中不相关的图表线
【发布时间】：2019-05-06 10:03:53
【问题描述】：

我有一个使用 highcharts 制作的温度和时间图表，但是当我单击 1 周、3 天或 1 天的范围时。图表在某些点上变得凌乱，并在图表中绘制不相关的图表线，如下图所示。

您也可以在 jsfiddl 上查看Demo。

你可以在这个链接上找到图表的数据 Data。

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<style>
@import 'https://code.highcharts.com/css/highcharts.css';

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}
.highcharts-xaxis-grid .highcharts-grid-line {
    stroke-width: 2px;
    stroke: #d8d8d8;
}
.highcharts-xaxis .highcharts-tick {
    stroke-width: 2px;
    stroke: #d8d8d8;
}
.highcharts-minor-grid-line {
    stroke-dasharray: 2, 2;
}
</style>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>



</body>
</html>
<script type="text/javascript">
// Notice that the dataset has missing data
$.getJSON('https://api.myjson.com/bins/m5imk', function (data) {

  Highcharts.stockChart('container', {

    chart: {
      type: 'spline'
    },
    rangeSelector: { enabled: false },
                scrollbar: { enabled: false },
     xAxis: {
         gridLineColor: '#f44242',
        minorTickInterval: 'auto',
        startOnTick: true,
        endOnTick: true
    },
    yAxis: {
        gridLineColor: '#f44242'
    },
    rangeSelector: {
      buttons: [
      {
        type: 'day',
        count: 1,
        text: '1d'
      },
      {
        type: 'day',
        count: 3,
        text: '3d'
      }, {
        type: 'week',
        count: 1,
        text: '1w'
      }, {
        type: 'month',
        count: 1,
        text: '1m'
      }, {
        type: 'month',
        count: 6,
        text: '6m'
      }, {
        type: 'year',
        count: 1,
        text: '1y'
      }, {
        type: 'all',
        text: 'All'
      }],
      selected: 3
    },

    title: {
      text: 'Temperature variation by day'
    },

    tooltip: {
      valueSuffix: '°C',
      valueDecimals: 1,
    },

    series: [{
      name: 'Temperatures',
      data: data,
      color: '#BF0B23',

        marker: 
        {
            fillColor: 'blue',
            lineWidth: 0

        }
    }]

  });
});



</script>

【问题讨论】：

那些数据点不是“无关紧要的”。因为您将未排序的数据提供给数据数组，它会随机显示。根据日期对它们进行排序，然后分配它们
嗨@shikhar，当我在highchart网站上检查时，我确实根据与示例中给出的文件中相同的日期对数据进行了排序
你的小提琴更新了吗..因为我看不到任何不良数据..！
如果您正在与链接中的数据交谈 >api.myjson.com/bins/m5imk

标签： javascript highcharts

【解决方案1】：

您在控制台中有Highcharts Error #15，这意味着您有未排序的数据：https://www.highcharts.com/errors/15/。

您需要在创建图表之前对数据进行排序：

data.sort(function(a, b) {
    return a[0] - b[0]
});

现场演示： https://jsfiddle.net/BlackLabel/wtc0pfu8/

【讨论】：

嗨@ppotaczek 感谢您的回答，我尝试了您提到的内容，它确实消除了错误，但是仍然有一些图形线在上面绘制而不是直接加入 2 个点
'y' 值是温度，'x' 值是时间戳中的温度
当然，但我的意思是如果两个或多个点具有相同的x，你想对'y'值做什么？您要计算这些值的平均值吗？
不，我不是在计算温度只是显示它们，我使用的数据是一种虚拟数据，实际数据之间会有一些最小值。
@kakarot，那么，您能否更准确地解释一下图表上的哪些线不正确？