Highsoft.Highstock .NET - Как обновить навигацию по всем графикам с помощью MVC

Question

Я использую Highsoft.Highstock .NET в своем приложении ASP.net MVC 5.

Я создаю список однолинейных диаграмм непосредственно внутри контроллера и отправляю все данные в представление.

Когда я изменяю навигацию (ползунок начала / конца в нижней части диаграммы) для одного графика, я хотел бы обновить все другие графики на тот же период времени (все графики имеют одинаковый промежуток времени).

Я бы хотел сделать это с помощью jquery, но сейчас я не могу. Я думаю, что я должен использовать

(я также читал API от Highstock, но есть кое-что другое, например: у моих диаграмм нет свойства "chart.title.text" -> у моей есть "chart.title.textStr")

Answer 1

Решение JS:

Чтобы обновить все графики при изменении положения навигатора на одном из них, вы можете использовать событие xAxis.events.afterSetExtremes для установки новых экстремумов на всех графиках (вы можете найти все ссылки на графики в массиве Highcharts.charts).

Код:

var json = "[[1534512600000,217.58],[1534771800000,215.46],[1534858200000,215.04],[1534944600000,215.05],[1535031000000,215.49],[1535117400000,216.16],[1535376600000,217.94],[1535463000000,219.7],[1535549400000,222.98],[1535635800000,225.03],[1535722200000,227.63],[1536067800000,228.36],[1536154200000,226.87],[1536240600000,223.1],[1536327000000,221.3],[1536586200000,218.33],[1536672600000,223.85],[1536759000000,221.07],[1536845400000,226.41],[1536931800000,223.84],[1537191000000,217.88],[1537277400000,218.24],[1537363800000,218.37],[1537450200000,220.03],[1537536600000,217.66],[1537795800000,220.79],[1537882200000,222.19],[1537968600000,220.42],[1538055000000,224.95],[1538141400000,225.74],[1538400600000,227.26],[1538487000000,229.28],[1538573400000,232.07],[1538659800000,227.99],[1538746200000,224.29],[1539005400000,223.77],[1539091800000,226.87],[1539178200000,216.36],[1539264600000,214.45],[1539351000000,222.11],[1539610200000,217.36],[1539696600000,222.15],[1539783000000,221.19],[1539869400000,216.02],[1539955800000,219.31],[1540215000000,220.65],[1540301400000,222.73],[1540387800000,215.09],[1540474200000,219.8],[1540560600000,216.3],[1540819800000,212.24],[1540906200000,213.3],[1540992600000,218.86],[1541079000000,222.22],[1541165400000,207.48],[1541428200000,201.59],[1541514600000,203.77],[1541601000000,209.95],[1541687400000,208.49],[1541773800000,204.47],[1542033000000,194.17],[1542119400000,192.23],[1542205800000,186.8],[1542292200000,191.41],[1542378600000,193.53],[1542637800000,185.86],[1542724200000,176.98],[1542810600000,176.78],[1542983400000,172.29],[1543242600000,174.62],[1543329000000,174.24],[1543415400000,180.94],[1543501800000,179.55],[1543588200000,178.58],[1543847400000,184.82],[1543933800000,176.69],[1544106600000,174.72],[1544193000000,168.49],[1544452200000,169.6],[1544538600000,168.63],[1544625000000,169.1],[1544711400000,170.95],[1544797800000,165.48],[1545057000000,163.94],[1545143400000,166.07],[1545229800000,160.89],[1545316200000,156.83],[1545402600000,150.73],[1545661800000,146.83],[1545834600000,157.17],[1545921000000,156.15],[1546007400000,156.23],[1546266600000,157.74],[1546439400000,157.92],[1546525800000,142.19],[1546612200000,148.26],[1546871400000,147.93],[1546957800000,150.75],[1547044200000,153.31],[1547130600000,153.8]]";

var data = JSON.parse(json);

function updateExtremes() {
  var currentChart = this.chart,
    chartIndex = currentChart.index,
    charts = Highcharts.charts,
    min = currentChart.xAxis[0].min,
    max = currentChart.xAxis[0].max;

  charts.forEach(function(chart) {
    if (chart.index !== chartIndex) {
      chart.xAxis[0].setExtremes(min, max, true, false);
    }
  });
}

Highcharts.stockChart('container1', {
  chart: {
    height: 250
  },
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  xAxis: {
    events: {
      afterSetExtremes: function() {
        updateExtremes.call(this);
      }
    }
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

Highcharts.stockChart('container2', {
  chart: {
    height: 250
  },
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  xAxis: {
    events: {
      afterSetExtremes: function() {
        updateExtremes.call(this);
      }
    }
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

Highcharts.stockChart('container3', {
  chart: {
    height: 250
  },
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  xAxis: {
    events: {
      afterSetExtremes: function() {
        updateExtremes.call(this);
      }
    }
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

Демо:
https://jsfiddle.net/BlackLabel/74rgyq13/

Справочник по JS API:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

C # API ссылка:
http://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_x_axis_events.html#aa8efb1a8237bc71a0268e5ee7e522096
http://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_x_axis_events.html#a120bc76164638d4a76a7ee20280d54ff