javascript - 为什么图表中的数据显示不正确？

标签 javascript python csv highcharts anychart

我无法理解为什么图表上的日期不对？我没有在任何地方指定年份。我从一个示例中获取了这段代码并对其进行了修改。这是代码:

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" />
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create data set on our data
  var dataSet = anychart.data.set(getData());

  // map data for the first series, take x from the zero column and value from the first column of data set
  var seriesData_1 = dataSet.mapAs({
    x: [0],
    value: [1]
  });

  // map data for the second series, take x from the zero column and value from the second column of data set
  var seriesData_2 = dataSet.mapAs({
    x: [0],
    value: [2]
  });

  // map data for the third series, take x from the zero column and value from the third column of data set
  var seriesData_3 = dataSet.mapAs({
    x: [0],
    value: [3]
  });

  var seriesData_4 = dataSet.mapAs({
    x: [0],
    value: [4]
  });

  // create line chart
  chart = anychart.line();

  // turn on chart animation
  chart.animation(true);

  // set chart padding
  chart.padding([10, 20, 5, 20]);

  // turn on the crosshair
  chart.crosshair()
    .enabled(true)
    .yLabel(false)
    .yStroke(null);

  // set tooltip mode to point
  chart.tooltip().positionMode('point');

  // set chart title text settings
  chart.title('Security: MSFT');
  chart.title().padding([0, 0, 5, 0]);

  // set yAxis title
  chart.yAxis().title('Price');
  chart.xAxis().labels().padding([5]);

  // create first series with mapped data
  var series_1 = chart.line(seriesData_1);
  series_1.name('Open');
  series_1.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_1.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  // create second series with mapped data
  var series_2 = chart.line(seriesData_2);
  series_2.name('Close');
  series_2.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_2.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  // create third series with mapped data
  var series_3 = chart.line(seriesData_3);
  series_3.name('Volume');
  series_3.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_3.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  var series_4 = chart.line(seriesData_4);
  series_4.name('Price');
  series_4.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_4.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);    

  // turn the legend on
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .padding([0, 0, 10, 0]);

  // set container id for the chart and set up paddings
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});

function getData() {
  return [
        [2016-12-01,757.44,759.85,737.02,747.92,3017947.0],
        [2016-12-02,744.59,754.0,743.1,750.5,1452484.0],
        [2016-12-05,757.71,763.9,752.9,762.52,1394223],
        [2016-12-06,764.73,768.83,757.34,759.11,1690689.0],
        [2016-12-07,761.0,771.36,755.8,771.19,1760966.0],
        [2016-12-08,772.48,778.18,767.23,776.42,1488059.0],
        [2016-12-09,780.0,789.43,779.02,789.29,1821914.0],
        [2016-12-12,785.04,791.25,784.36,789.27,2104117.0],
        [2016-12-13,793.9,804.38,793.34,796.1,2145209.0],
        [2016-12-14,797.4,804.0,794.01,797.07,1704150.0],
        [2016-12-15,797.34,803.0,792.92,797.85,1626499.0],
        [2016-12-16,800.4,800.86,790.29,790.8,2443796.0],
        [2016-12-19,790.22,797.66,786.27,794.2,1232087.0],
        [2016-12-20,796.76,798.65,793.27,796.42,951014.0],
        [2016-12-21,795.84,796.68,787.1,794.56,1211346.0],
        [2016-12-22,792.36,793.32,788.58,791.26,972169.0],
        [2016-12-23,790.9,792.74,787.28,789.91,623944.0],
        [2016-12-27,790.68,797.86,787.66,791.55,789321.0],
        [2016-12-28,793.7,794.23,783.2,785.05,1153824.0],
        [2016-12-29,783.33,785.93,778.92,782.79,744272.0],
        [2016-12-30,782.75,782.78,770.41,771.82,1769950.0]
  ]
}
    </script>
</body>
</html>

但我的输出如下所示:

Output

为什么 x 轴上的日期与我指定的不同？

最佳答案

您的日期必须是字符串，例如

["2016-12-01",757.44,759.85,737.02,747.92,3017947.0]

您将它们用作字面上的 2016-12-01 且不带引号，这会被解释为算术表达式，结果为 2003。 2016-12-27 是 1977 等。这就是错误日期的来源。 

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" />
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create data set on our data
  var dataSet = anychart.data.set(getData());

  // map data for the first series, take x from the zero column and value from the first column of data set
  var seriesData_1 = dataSet.mapAs({
    x: [0],
    value: [1]
  });

  // map data for the second series, take x from the zero column and value from the second column of data set
  var seriesData_2 = dataSet.mapAs({
    x: [0],
    value: [2]
  });

  // map data for the third series, take x from the zero column and value from the third column of data set
  var seriesData_3 = dataSet.mapAs({
    x: [0],
    value: [3]
  });

  var seriesData_4 = dataSet.mapAs({
    x: [0],
    value: [4]
  });

  // create line chart
  chart = anychart.line();

  // turn on chart animation
  chart.animation(true);

  // set chart padding
  chart.padding([10, 20, 5, 20]);

  // turn on the crosshair
  chart.crosshair()
    .enabled(true)
    .yLabel(false)
    .yStroke(null);

  // set tooltip mode to point
  chart.tooltip().positionMode('point');

  // set chart title text settings
  chart.title('Security: MSFT');
  chart.title().padding([0, 0, 5, 0]);

  // set yAxis title
  chart.yAxis().title('Price');
  chart.xAxis().labels().padding([5]);

  // create first series with mapped data
  var series_1 = chart.line(seriesData_1);
  series_1.name('Open');
  series_1.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_1.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  // create second series with mapped data
  var series_2 = chart.line(seriesData_2);
  series_2.name('Close');
  series_2.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_2.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  // create third series with mapped data
  var series_3 = chart.line(seriesData_3);
  series_3.name('Volume');
  series_3.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_3.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);

  var series_4 = chart.line(seriesData_4);
  series_4.name('Price');
  series_4.hoverMarkers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_4.tooltip()
    .position('right')
    .anchor('left')
    .offsetX(5)
    .offsetY(5);    

  // turn the legend on
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .padding([0, 0, 10, 0]);

  // set container id for the chart and set up paddings
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});

function getData() {
  return [
        ["2016-12-01",757.44,759.85,737.02,747.92,3017947.0],
        ["2016-12-02",744.59,754.0,743.1,750.5,1452484.0],
        ["2016-12-06",764.73,768.83,757.34,759.11,1690689.0],
        ["2016-12-07",761.0,771.36,755.8,771.19,1760966.0],
        ["2016-12-08",772.48,778.18,767.23,776.42,1488059.0],
        ["2016-12-09",780.0,789.43,779.02,789.29,1821914.0],
        ["2016-12-12",785.04,791.25,784.36,789.27,2104117.0],
        ["2016-12-13",793.9,804.38,793.34,796.1,2145209.0],
        ["2016-12-14",797.4,804.0,794.01,797.07,1704150.0],
        ["2016-12-15",797.34,803.0,792.92,797.85,1626499.0],
        ["2016-12-16",800.4,800.86,790.29,790.8,2443796.0],
        ["2016-12-19",790.22,797.66,786.27,794.2,1232087.0],
        ["2016-12-20",796.76,798.65,793.27,796.42,951014.0],
        ["2016-12-21",795.84,796.68,787.1,794.56,1211346.0],
        ["2016-12-22",792.36,793.32,788.58,791.26,972169.0],
        ["2016-12-23",790.9,792.74,787.28,789.91,623944.0],
        ["2016-12-27",790.68,797.86,787.66,791.55,789321.0],
        ["2016-12-28",793.7,794.23,783.2,785.05,1153824.0],
        ["2016-12-29",783.33,785.93,778.92,782.79,744272.0],
        ["2016-12-30",782.75,782.78,770.41,771.82,1769950.0]
  ]
}
    </script>
</body>
</html>

关于javascript - 为什么图表中的数据显示不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44727526/

上一篇：javascript - JS - append 记录的数字序列

下一篇：javascript - 循环遍历分割数组并使用wrapInner输出

相关文章：

python - For csv reader_Python 中的循环位置

javascript - Object.defineProperty() vs Object.prototype.property vs Object.property 什么时候用什么？

python - Scrapy:如何设置 HTTP 代理以连接到 HTTPS 网站(HTTP 有效)？

python - 一个接一个地同时执行某些命令，同时执行两台所有服务器

python - 使用旋转的垂直条形图 ='vertical' 不起作用

mysql - 如何将多个csv文件导入到mysql

c++ - 在我编写的处理 csv 文件的相当基本的 C++ 程序中寻找错误

javascript - 如何将带有 SVG 的 div#WareHouse 转换为图像

javascript - Angular/ ionic ng-click 不更新 View ，但它在模型中更新

c# - 如何重新加载下拉列表

©2024 IT工具网  联系我们