Question

我创建了一个带有高库存图表的网页。图表中填充了一些数据。然后，用户添加几个指示器和其他注释，例如线条，尺寸等。

是否可以保存图表状态，以便以后可以使用所有指标和注释恢复图表？

是否可以保存指标和注释并将其应用于具有不同数据的新图表？（例如，用户正在查看BHP股票价格，而已更改为查看GOOG股票价格）

Answer 1

关键是要从图表中获取并保存正确的userOptions属性。

例如，您可以将选项保存在localStorage中，并在刷新页面时恢复图表：

document.getElementById('save')
    .addEventListener('click', function() {
        var userOptions = chart.userOptions;

        if (chart.annotations.length) {
            userOptions.annotations = getOptions(chart.annotations);
        }

        if (chart.series.length) {
            userOptions.series = getOptions(chart.series);
        }

        userOptions.xAxis = getOptions(chart.xAxis);
        userOptions.yAxis = getOptions(chart.yAxis);

        localStorage.setItem(
            'customStockToolsChart',
            JSON.stringify(chart.userOptions)
        );
    });

document.getElementById('clear')
    .addEventListener('click', function() {
        localStorage.removeItem('customStockToolsChart');
    });

...

if (localStorage.customStockToolsChart) {
    var chart = Highcharts.stockChart(
        'container',
        JSON.parse(localStorage.customStockToolsChart)
    );

    addEvents(chart);

} else {
    $.getJSON(...)
}

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

如果要更改数据，只需替换userOptions中的非指示器系列即可。

Answer 2

是否可以保存图表的状态，以便可以将图表以后恢复所有指示符和注释吗？

是的，有可能。您可以简单地复制传递给Highcharts构造函数的初始选项，并使用用户添加的指示符，标志，注释和y轴对其进行扩展。然后，您可以使用保存的选项来初始化新图表。另外，请注意，GUI工具栏上的图标（最后一个）将在highcharts-chart键下将图表保存在localStorage中。查看下面发布的演示和代码以找到解决方案。

是否可以保存指标和注释并应用它们到具有不同数据的新图表？

是的，这应该不是问题。只需使用保存的选项并更改数据即可。

代码：

var data = [
  [1538400600000, 227.95, 229.42, 226.35, 227.26, 23600800],
  [1538487000000, 227.25, 230, 226.63, 229.28, 24788200],
  [1538573400000, 230.05, 233.47, 229.78, 232.07, 28654800],
  [1538659800000, 230.78, 232.35, 226.73, 227.99, 32042000],
  [1538746200000, 227.96, 228.41, 220.58, 224.29, 33580500],
  [1539005400000, 222.21, 224.8, 220.2, 223.77, 29663900],
  [1539091800000, 223.64, 227.27, 222.25, 226.87, 26891000],
  [1539178200000, 225.46, 226.35, 216.05, 216.36, 41990600],
  [1539264600000, 214.52, 219.5, 212.32, 214.45, 53124400],
  [1539351000000, 220.42, 222.88, 216.84, 222.11, 40337900],
  [1539610200000, 221.16, 221.83, 217.27, 217.36, 30791000],
  [1539696600000, 218.93, 222.99, 216.76, 222.15, 29184000],
  [1539783000000, 222.3, 222.64, 219.34, 221.19, 22885400],
  [1539869400000, 217.86, 219.74, 213, 216.02, 32581300],
  [1539955800000, 218.06, 221.26, 217.43, 219.31, 33078700],
  [1540215000000, 219.79, 223.36, 218.94, 220.65, 28792100],
  [1540301400000, 215.83, 223.25, 214.7, 222.73, 38767800],
  [1540387800000, 222.6, 224.23, 214.54, 215.09, 40925500],
  [1540474200000, 217.71, 221.38, 216.75, 219.8, 29855800],
  [1540560600000, 215.9, 220.19, 212.67, 216.3, 47258400],
  [1540819800000, 219.19, 219.69, 206.09, 212.24, 45935500],
  [1540906200000, 211.15, 215.18, 209.27, 213.3, 36660000],
  [1540992600000, 216.88, 220.45, 216.62, 218.86, 38358900],
  [1541079000000, 219.05, 222.36, 216.81, 222.22, 58323200],
  [1541165400000, 209.55, 213.65, 205.43, 207.48, 91328700],
  [1541428200000, 204.3, 204.39, 198.17, 201.59, 66163700],
  [1541514600000, 201.92, 204.72, 201.69, 203.77, 31882900],
  [1541601000000, 205.97, 210.06, 204.13, 209.95, 33424400],
  [1541687400000, 209.98, 210.12, 206.75, 208.49, 25362600],
  [1541773800000, 205.55, 206.01, 202.25, 204.47, 34365800],
  [1542033000000, 199, 199.85, 193.79, 194.17, 51135500],
  [1542119400000, 191.63, 197.18, 191.45, 192.23, 46882900],
  [1542205800000, 193.9, 194.48, 185.93, 186.8, 60801000],
  [1542292200000, 188.39, 191.97, 186.9, 191.41, 46478800],
  [1542378600000, 190.5, 194.97, 189.46, 193.53, 36928300],
  [1542637800000, 190, 190.7, 184.99, 185.86, 41925300],
  [1542724200000, 178.37, 181.47, 175.51, 176.98, 67825200],
  [1542810600000, 179.73, 180.27, 176.55, 176.78, 31124200],
  [1542983400000, 174.94, 176.6, 172.1, 172.29, 23624000],
  [1543242600000, 174.24, 174.95, 170.26, 174.62, 44998500],
  [1543329000000, 171.51, 174.77, 170.88, 174.24, 41387400],
  [1543415400000, 176.73, 181.29, 174.93, 180.94, 46062500],
  [1543501800000, 182.66, 182.8, 177.7, 179.55, 41770000],
  [1543588200000, 180.29, 180.33, 177.03, 178.58, 39531500],
  [1543847400000, 184.46, 184.94, 181.21, 184.82, 40802500],
  [1543933800000, 180.95, 182.39, 176.27, 176.69, 41344300],
  [1544106600000, 171.76, 174.78, 170.42, 174.72, 43098400],
  [1544193000000, 173.49, 174.49, 168.3, 168.49, 42281600],
  [1544452200000, 165, 170.09, 163.33, 169.6, 62026000],
  [1544538600000, 171.66, 171.79, 167, 168.63, 47281700]
];

// split the data set into ohlc and volume
var ohlc = [],
  volume = [],
  chartOptions,
  savedOptions,
  options,
  dataLength = data.length,
  i = 0;

for (i; i < dataLength; i += 1) {
  ohlc.push([
    data[i][0], // the date
    data[i][1], // open
    data[i][2], // high
    data[i][3], // low
    data[i][4] // close
  ]);

  volume.push([
    data[i][0], // the date
    data[i][5] // the volume
  ]);
}

chartOptions = {
  yAxis: [{
    labels: {
      align: 'left'
    },
    height: '80%',
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'left'
    },
    top: '80%',
    height: '20%',
    offset: 0
  }],
  tooltip: {
    shape: 'square',
    headerShape: 'callout',
    borderWidth: 0,
    shadow: false,
    positioner: function(width, height, point) {
      var chart = this.chart,
        position;

      if (point.isHeader) {
        position = {
          x: Math.max(
            // Left side limit
            chart.plotLeft,
            Math.min(
              point.plotX + chart.plotLeft - width / 2,
              // Right side limit
              chart.chartWidth - width - chart.marginRight
            )
          ),
          y: point.plotY
        };
      } else {
        position = {
          x: point.series.chart.plotLeft,
          y: point.series.yAxis.top - chart.plotTop
        };
      }

      return position;
    }
  },
  series: [{
    type: 'ohlc',
    id: 'aapl-ohlc',
    name: 'AAPL Stock Price',
    data: ohlc
  }, {
    type: 'column',
    id: 'aapl-volume',
    name: 'AAPL Volume',
    data: volume,
    yAxis: 1
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 800
      },
      chartOptions: {
        rangeSelector: {
          inputEnabled: false
        }
      }
    }]
  }
};

var chart = Highcharts.stockChart('container', chartOptions);

$('#saveOptionsBtn').on('click', function() {

  var navigation = chart.navigationBindings,
    navChart = navigation.chart,
    indicators = [],
    flags = [];

  options = JSON.parse(JSON.stringify(chartOptions));

  navChart.series.forEach(function(series) {
    if (
      series instanceof Highcharts.seriesTypes.sma ||
      series.type === 'flags'
    ) {
      options.series.push(series.userOptions);
    }
  });

  navChart.yAxis.forEach(function(yAxis) {
    if (navigation.utils.isNotNavigatorYAxis(yAxis)) {
      options.yAxis.push(yAxis.options);
    }
  });

  navChart.annotations.forEach(function(annotation, index) {
    if (!options.annotations) {
      options.annotations = []
    }

    options.annotations.push(annotation.userOptions);
  });
});

$('#makeCopyBtn').on('click', function() {
  Highcharts.stockChart('container2', options);
});

#container,
#container2 {
  max-height: 400px;
  height: 75vh;
}

/* Conflict with Bootstrap, not needed after v7.0.1 */

.highcharts-bindings-wrapper * {
  box-sizing: content-box;
}

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

<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/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>

<div id="container" class="chart"></div>
<button id='saveOptionsBtn'>save chart options</button>
<button id='makeCopyBtn'>make a copy of the chart</button>
<div id="container2" class="chart"></div>

演示：

https://jsfiddle.net/BlackLabel/pkacyn0q/

如何保存和还原带有指标的Highstock图表？

2 个答案: