Question

我正在使用名为Highcharts https://www.highcharts.com/的JavaScript库在股票/折线图上绘制JSON数据。

参考下面的图片，了解我在这篇文章中使用的术语。 https://www.highcharts.com/images/docs/understanding_highstock.png

所以当点击范围选择器按钮放大时一切正常。但是当我使用导航器指定一个巨大的范围（年）时，最终的线图是不正确的。我创建了一些图片来帮助你理解我的意思。

在尝试将[1519162460000,246.39649367343821]作为我的最终价格时，使用范围选择器按钮指定较小的范围非常有效：

但现在，让我调整导航器的大小以显示整个价格历史记录：

如果你仔细观察图像，你应该可以看到图表上的最后一个图是不正确的，当它应该显示$ 246.40 246.39649367343821＆lt; - round

时显示$ 230.72

正如您可能知道的那样，对于试图在我的网站上显示相关价格信息的人来说，这是一个主要问题。

如果我不限制图表div的宽度或调整浏览器窗口的大小，那么图表显示正常但我仍然不知道问题。（注意：我刚刚描述的内容在codepen中不起作用，因为视口宽度受到限制，因此无论我在足够大的范围内导航时，情节都会变得混乱）

下面是我的js和html的片段以及我创建的codepen的链接。

JS

Highcharts.setOptions({
  lang: {
    thousandsSep: ","
  }
});



Highcharts.stockChart("chart", {
  chart: {
    width: 290,
    padding: [5, 5, 5, 5]
  },

  title: {
    text: "Litecoin Price" // make dynamic
  },

  series: [
    {
      name: "Price",
      data: JSON.parse(data)["stats"],
      tooltip: {
        valueDecimals: 2,
        valuePrefix: "$",
        valueSuffix: " USD"
      }
    }
  ],

  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          chart: {
            zoomType: "none"
          },
          credits: {
            enabled: false
          },
          scrollbar: {
            enabled: false
          } //,
          //navigator: {
          //enabled: false
          //},
          //rangeSelector: {
          //enabled: false
          //}
        }
      }
    ]
  },

  scrollbar: {
    liveRedraw: false
  },

  rangeSelector: {
    allButtonsEnabled: false,
    buttons: [
      {
        type: "month",
        count: 1,
        text: "1m"
      },
      {
        type: "month",
        count: 3,
        text: "3m"
      },
      {
        type: "month",
        count: 6,
        text: "6m"
      },
      {
        type: "year",
        count: 1,
        text: "1y"
      },
      {
        type: "ytd",
        count: 1,
        text: "YTD"
      }
    ],
    selected: 4,
    inputEnabled: true,
    enabled: true,
    inputStyle: {
      color: "#757575"
    },
    labelStyle: {
      color: "#757575"
    }
  }
});

HTML

<div class="card" style="padding: 10px; min-width: 330px;">
  <div class="card chart-card" style="height: 350px; overflow: hidden; width: 300px;">
    <div id="chart" style="height: 350px; min-width: 300px;">
                <div id="highcharts-loading">
                        <div style="display: block; margin: 0 auto; position: absolute; top: calc(50% - 24px); left: calc(50% - 24px);"><span class="loading1"></span></div>
                </div>

                <div id="highcharts-nodata" style="display:none; text-align: center;">No chart data found</div>
        </div>
    </div>
</div>

Answer 1

那是因为当你缩小时，Highcharts会对数据进行分组并显示平均值。如果您查看工具提示，它会说明＆＃34;周，即2018年2月19日星期一＆＃34;，这意味着显示的值是该周的平均值。我相信有一些设置允许您禁用该分组，但是由于渲染了如此多的数据点而导致图形交互可能变得滞后。

数据分组是将数据值采样为更大的概念块以便于阅读并提高性能 JavaScript图表。默认情况下，Highstock应用数据分组点变得比某个像素值更接近，由...确定 groupPixelWidth选项。

折线图上数据分组的设置如下：series.line.dataGrouping

HighChart绘图无法在小div上正确显示

1 个答案: