Question

下面是一个html文件，可以使用相同的确切数据和属性创建风向图。问题是，有两个调用来创建风向图new Highcharts.StockChart(commonOptions)和Highcharts.chart('container')。如果同时查看两个图表，则可以看到它们创建了不同的图表（主要是工具提示的显示方式）。第一次调用显示所有工具提示，同时显示第二次调用，同时显示普通工具提示。必须有一些导致这种情况的选项，但是许多小时后仍无法找到它。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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 type="text/javascript">
            window.onload = function() {

    var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
    var commonOptions = {
       chart: {
        renderTo: 'container',
        polar: true,
        type: 'column'
      },
      xAxis: {
        min: 0,
        max: 360,
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
          formatter: function() {
            return categories[parseInt(this.value / 22.5)] ;
          }
        }
      },
      yAxis: {
        min: 0,
        endOnTick: false,
        reversedStacks: false
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          shadow: false,
          groupPadding: 0,
          pointPlacement: 'on'
        }
      },
  rangeSelector: {enabled:false},
  navigator: {enabled: false},
    scrollbar: {enabled: false},
        series: [{ name:"a",
        data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
        name:"b",
        data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
        name:"C",
        data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]

    var chart = new Highcharts.StockChart(commonOptions);
    });

    Highcharts.chart('container1', {
      chart: {
        polar: true,
        type: 'column'
      },
      xAxis: {
        min: 0,
        max: 360,
        tickInterval: 22.5,
        tickmarkPlacement: 'on',
        labels: {
          formatter: function() {
            return categories[this.value / 22.5];
          }
        }
      },
      yAxis: {
        min: 0,
        endOnTick: false,
        reversedStacks: false
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          shadow: false,
          groupPadding: 0,
          pointPlacement: 'on'
        }
      },
  rangeSelector: {enabled:false},
  navigator: {enabled: false},
    scrollbar: {enabled: false},
      series: [{ name:"a",
        data: [{x: 0, y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5, y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}, {
        name:"b",
        data: [{x: 0,y: 2}, {x: 22.5,y: 6}, {x: 45,y: 1}, {x: 67.5,y: 9}, {x: 90,y: 9}, {x: 112.5,y: 3}, {x: 135,y: 5}, {x: 157.5,y: 3}, {x: 180,y: 7}]}, {
        name:"C",
        data: [{x: 0,y: 5}, {x: 22.5,y: 3}, {x: 45,y: 4}, {x: 67.5, y: 2}, {x: 90,y: 9}, {x: 112.5,y: 2}, {x: 135,y: 8}, {x: 157.5,y: 9}, {x: 180,y: 2}]}]
    });
    }
        </script>
    </head>
    <body>
        <div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
        <div id="container1" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Answer 1

如果您在第一个图表的工具提示部分添加split：false，那么它们都将显示相同的工具提示

Answer 2

这种差异是由于您使用了两种不同的图表构造函数类型造成的：

Highcharts.stockChart([renderTo], options);

Highcharts.chart([renderTo], options);

Highstock基于Highcharts，这意味着它具有Highcharts的所有核心功能，以及一些其他功能。

此外，这些图表类型中的某些默认选项（例如tooltip.split或legend.enabled）不同。

实时演示： https://jsfiddle.net/BlackLabel/nsy8rdg6/

API参考：

https://api.highcharts.com/class-reference/Highcharts.html#.stockChart

https://api.highcharts.com/class-reference/Highcharts.html#.chart

文档：

https://www.highcharts.com/docs/stock/understanding-highstock

为什么这两个Highcharts调用会产生不同的windrose图表

2 个答案: