为什么我的散点在高图中以垂直线绘制

Question

我有一个使用 Highcharts 创建的散点图。为什么点是以直线生成的，而不是像正常的散点图那样？

我的代码：

Highcharts.chart('container', {
    "chart": {
      "backgroundColor": "#000",
      "type": "scatter",
      "zoomType": "xy"
    },
    "accessibility": {
      "enabled": false
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true,
      "itemStyle": {
        "color": "#ffffff"
      }
    },
    "rangeSelector": {
      "enabled": false
    },
    "navigator": {
      "enabled": false
    },
    "scrollbar": {
      "enabled": false
    },
    "xAxis": {
      "type": "datetime",
      "labels": {
        "style": {
          "color": "#ffffff"
        }
      },
      "lineColor": "#ffffff",
      "lineWidth": 3
    },
    "yAxis": [{
      "gridLineColor": "#000",
      "lineColor": "#fff",
      "lineWidth": 3,
      "labels": {
        "style": {
          "color": "#fff"
        }
      },
      "title": {
        "text": ""
      },
      "opposite": false
    }, {
      "title": {
        "text": "",
        "color": "#fff"
      },
      "opposite": true,
      "gridLineColor": "#000",
      "lineColor": "#fff",
      "lineWidth": 3,
      "labels": {
        "style": {
          "color": "#fff"
        }
      }
    }],
    "plotOptions": {
      "scatter": {
        "marker": {
          "radius": 2.5,
          "symbol": "circle",
          "states": {
            "hover": {
              "enabled": true,
              "lineColor": "rgb(100,100,100)"
            }
          }
        },
        "states": {
          "hover": {
            "marker": {
              "enabled": false
            }
          }
        },
        "jitter": {
          "x": 0.005
        }
      }
    },
    "series": [{
      "name": "visits",
      "data" [....],
      "color": "#ff0000",
      "yAxis": 1
    }.....]
  });
  

<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>
    
</figure>

我的小提琴：https://jsfiddle.net/nb_nb_nb/079o25ux/1/

FIDDLE 包含完整代码

Answer 1

它们以直线绘制，因为它们具有完全相同的 x 值。如果您不希望这些点呈直线，则应该区分它们的 x 值，例如如下所示：https://jsfiddle.net/BlackLabel/qy85vk7u/

 data: [
  [new Date('2017-01-01T00:00:00Z').getTime(), 1],
  [new Date('2017-01-03T00:00:00Z').getTime(), 2],
  [new Date('2017-01-04T00:00:00Z').getTime(), 1],
]