HighStock charts中的多个系列

时间：2015-10-03 15:26:11

标签： highcharts highstock

我按照下面的帖子来解决问题，但这对我没用。

我有简单的要求在页面/图表的加载中在单个图表（GBP_USD，USD_EUR和USD_CHF）中绘制多个系列，并且一旦初始加载完成，每秒都会调用一个返回数组的服务器三个值一个用于series1（GBP_USD），第二个用于series2（EUR_USD），第三个用于series3（USD_CHF）。

我开始首先绘制静态图，在一个图表中绘制三个系列......

当我在图表中绘制单个系列时，它可以正常工作，但是当我添加更多系列时它不起作用。我可以在三个不同的调用中下载数据（按照HighStock的比较示例）并且数据已成功接收，但是我没有获得曲线，而是获得了直线。 [！[图像显示在Array中有三个名称，它绘制直线] [1]] [1]。 [！[此图像显示名称数组只有一个值时的图表 - GBP_USD] [2]] [2]

JSFiddle link 

$(function() {
  console.log('in annynymous()');
  //	var names = ['GBP_USD'], // Any One Currency, works [serise is as it should be]
  var names = ['GBP_USD', 'EUR_USD', 'USD_CHF'], // Three currencies [series are flat]
    seriesCounter = 0,
    seriesOptions = [],
    colors = Highcharts.getOptions().colors;

  console.log('starting to retrive data');

  $.each(names, function(i, name) {
    document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving data</B>';


    var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id=" + name;
    $.getJSON(url, function(data) {
      console.log("success with grabing json data for " + name);

      seriesOptions[i] = {
        name: name + ' Temperature',
        data: data,
        color: colors[i],
        type: 'line'
      };

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter++;

      if (seriesCounter == names.length) {
        createChart();
      }
    });
  });

  // create the chart when all data is loaded
  function createChart() {

    console.log('in createChart()');
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    // Create a timer, to test how long this takes to load
    var start = +new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {

      chart: {
        events: {
          load: function(chart) {
            this.setTitle(null, {
              text: 'This chart was built on ' + new Date() + ' in ' + (new Date() - start) + 'ms'
            });


          }
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1hr'
        }, {
          type: 'hour',
          count: 3,
          text: '3hr'
        }, {
          type: 'hour',
          count: 12,
          text: '12hr'
        }, {
          type: 'day',
          count: 1,
          text: '1d'
        }, {
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'day',
          count: 5,
          text: '5d'
        }, {
          type: 'day',
          count: 7,
          text: '7d'
        }, {
          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: 'all',
          text: 'All'
        }],
        selected: 2
      },

      yAxis: {
        type: 'linear',
        title: {
          text: 'Prices'
        }
      },

      title: {
        text: 'Historical Instruments Data '
      },

      subtitle: {
        text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
      },

      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
        valueDecimals: 1
      },

      series: seriesOptions,

      exporting: {
        width: 1000
      }

    }, function(chart) {
      // Last point in graph...
      document.getElementById("loading").style.display = "none"; //hide the loading text

      showLastPointTooltip(chart);
    });
  };

});


function showLastPointTooltip(objHighStockchart) {
  // show tooltip for last point   
  var points = [];
  if (objHighStockchart) {
    for (var i = 0; i < objHighStockchart.series.length; i++)

      points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length - 1]);


    objHighStockchart.tooltip.refresh(points);


  };
  console.log('DONE')

};
<title>Multiple Currencies</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="loading" sytle="font-weight:bold;"></div>
<div id="container" style="height: 500px; min-width: 500px">

我可以控制服务器端的数据/格式和频率，并可以更改为使解决方案正常工作所需的任何最佳方式。

我也按照下面的示例行但是行并将url更改为我的本地服务器并更改了Jquery verion和HighStock图表脚本标记，但是出现了错误。[！[在以下URL中运行示例时出错] [ 3]] [3]

trouble plotting multiple series of data on highstock

服务器端的三种货币数据如下：

GBP_USD = [[1442485146000,1.55080]，[1442485147000,1.55080]，[1442485147000,1.55077]，[1442485148000,1.55067]，[1442485149000,1.55067]，[1442485150000,1.55067]，[1442485151000,1.55067]，[1442485152000 ，1.55067]，[1442485152000,1.55067]，[1442485153000,1.55067]，[1442485154000,1.55072]，[1442485155000,1.55072]，[1442485156000,1.55072]，[1442485157000,1.55072]，[1442485158000,1.55072]，[1442485158000,1.55072 ]，[1442485159000,1.55072]，[1442485160000,1.55072]，[1442485161000,1.55072]，[1442485162000,1.55072]，[1442485163000,1.55072]，[1442485163000,1.55072]，[1442485164000,1.55072]，[1442485165000,1.55072] [1442485166000,1.55072]，[1442485167000,1.55072]，[1442485168000,1.55072]，[1442485169000,1.55072]，[1442485169000,1.55072]，[1442485170000,1.55076]，[1442485171000,1.55107]，[1442485172000,1.55107]，[1442485173000 ，1.55107]，[1442485174000,1.55107]，[1442485174000,1.55107]，[1442485175000,1.55107]]

EUR_USD = [[1442485146000,1.13152]，[1442485147000,1.13152]，[1442485147000,1.13156]，[1442485148000,1.13151]，[1442485149000,1.13155]，[1442485150000,1.13155]，[1442485151000,1.13153]，[1442485152000 ，1.13155]，[1442485152000,1.13155]，[1442485153000,1.13155]，[1442485154000,1.13155]，[1442485155000,1.13155]，[1442485156000,1.13155]，[1442485157000,1.13155]，[1442485158000,1.13155]，[1442485158000,1.13155 ]，[1442485159000,1.13155]，[1442485160000,1.13155]，[1442485161000,1.13155]，[1442485162000,1.13155]，[1442485163000,1.13155]，[1442485163000,1.13155]，[1442485164000,1.13155]，[1442485165000,1.13155] [1442485166000,1.13155]，[1442485167000,1.13155]，[1442485168000,1.13155]，[1442485169000,1.13155]，[1442485169000,1.13155]，[1442485170000,1.13157]，[1442485171000,1.13149]，[1442485172000,1.13149]，[1442485173000 ，1.13149]，[1442485174000,1.13149]，[1442485174000,1.13155]，[1442485175000,1.13155]]

USD_CHF = [[1442485146000,0.96951]，[1442485147000,0.96951]，[1442485147000,0.96948]，[1442485148000,0.96948]，[1442485149000,0.96948]，[1442485150000,0.96948]，[1442485151000,0.96948]，[1442485152000 ，0.96939]，[1442485152000,0.96933]，[1442485153000,0.96933]，[1442485154000,0.96933]，[1442485155000,0.96933]，[1442485156000,0.96933]，[1442485157000,0.96933]，[1442485158000,0.96933]，[1442485158000,0.96933 ]，[1442485159000,0.96933]，[1442485160000,0.96933]，[1442485161000,0.96933]，[1442485162000,0.96933]，[1442485163000,0.96933]，[1442485163000,0.96933]，[1442485164000,0.96933]，[1442485165000,0.96933] [1442485166000,0.96933]，[1442485167000,0.96933]，[1442485168000,0.96933]，[1442485169000,0.96933]，[1442485169000,0.96933]，[1442485170000,0.96933]，[1442485171000,0.96940]，[1442485172000,0.96940]，[1442485173000 ，0.96940]，[1442485174000,0.96940]，[1442485174000,0.96940]，[1442485175000,0.96940]]

任何有关指针的帮助都将受到高度赞赏......

1 个答案:

答案 0 :(得分：4)

这种情况正在发生，因为与不同系列之间的差异相比，一个系列中的数据变化太小，无法产生任何视觉差异。例如，每个系列中的数据变化小于+/- 0.001，而第2和第3系列之间的差异接近0.16，大于0.001大约160倍！您甚至可以在this updated fiddle中直观地看到此效果（请参阅图表底部的图例？单击系列中的2以隐藏它们，并查看第3个如何展开以填充空白区域。）

有两种方法可以解决这个问题，两种方法都涉及多个y轴：

1。使用多个重叠的y轴

var axisOptions = [];

$.each(names, function(i, name) {
  var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id="+ name; 
  $.getJSON(url, function(data) {
    axisOptions.push({
      title: {
      text: name + 'Prices'
    });
    // build seriesOptions and other stuff ...
  });
});

$('#container').highcharts('StockChart', {
    yAxis: axisOptions,
    // other options ...
});

Link to JSFiddle 

$(function() {
  console.log('in annynymous()');
  //	var names = ['GBP_USD'], // Any One Currency, works [serise is as it should be]
  var names = ['GBP_USD', 'EUR_USD', 'USD_CHF'], // Three currencies [series are flat]
    seriesCounter = 0,
    seriesOptions = [],
    axisOptions = [],
    colors = Highcharts.getOptions().colors;

  console.log('starting to retrive data');

  $.each(names, function(i, name) {
    document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving data</B>';


    var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id=" + name;
    $.getJSON(url, function(data) {
      console.log("success with grabing json data for " + name);

      seriesOptions[i] = {
        name: name + ' Temperature',
        data: data,
        color: colors[i],
        type: 'line',
        yAxis: i
      };

      axisOptions.push({
        title: {
          text: name + 'Prices'
        },
      });

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter++;

      if (seriesCounter == names.length) {
        createChart();
      }
    });
  });

  // create the chart when all data is loaded
  function createChart() {

    console.log('in createChart()');
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    // Create a timer, to test how long this takes to load
    var start = +new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {

      chart: {
        events: {
          load: function(chart) {
            this.setTitle(null, {
              text: 'This chart was built on ' + new Date() + ' in ' + (new Date() - start) + 'ms'
            });


          }
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1hr'
        }, {
          type: 'hour',
          count: 3,
          text: '3hr'
        }, {
          type: 'hour',
          count: 12,
          text: '12hr'
        }, {
          type: 'day',
          count: 1,
          text: '1d'
        }, {
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'day',
          count: 5,
          text: '5d'
        }, {
          type: 'day',
          count: 7,
          text: '7d'
        }, {
          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: 'all',
          text: 'All'
        }],
        selected: 2
      },

      // NOTE: I added these lines
      // See the chart legend at the bottom of the chart now?
      // Click on 2 of the series to remove them, and notice how
      // the 3rd one expands to show all the points correctly
      legend: {
        enabled: true
      },

      yAxis: axisOptions,

      title: {
        text: 'Historical Instruments Data '
      },

      subtitle: {
        text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
      },

      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
        valueDecimals: 1
      },

      series: seriesOptions,

      exporting: {
        width: 1000
      }

    }, function(chart) {
      // Last point in graph...
      document.getElementById("loading").style.display = "none"; //hide the loading text

      showLastPointTooltip(chart);
    });
  };

});


function showLastPointTooltip(objHighStockchart) {
  // show tooltip for last point   
  var points = [];
  if (objHighStockchart) {
    for (var i = 0; i < objHighStockchart.series.length; i++)

      points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length - 1]);


    objHighStockchart.tooltip.refresh(points);


  };
  console.log('DONE')

};
<title>Multiple Currencies</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="loading" sytle="font-weight:bold;"></div>
<div id="container" style="height: 500px; min-width: 500px">

这只是将您的3个系列中的每一个分配到不同的轴。因此，除了创建seriesOptions之外，您现在每个人都有axisOptions。

solution 1

2。使用多个不重叠的y轴

var axisOptions = [],
    numAxes = names.length,
    // percentage of height left out for spacing the 3 y-axes
    axisSpacingPercent = 5,
    // percentage of height occupied by each y-axis
    axisHeightPercent = (100 - (numAxes - 1) * axisSpacingPercent) / numAxes;

$.each(names, function(i, name) {
  var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id="+ name; 
  $.getJSON(url, function(data) {
    axisOptions.push({
      title: {
        text: name + 'Prices'
      },
      // settings for multiple panes in the chart
      height: '' + axisHeightPercent + '%',
      top: '' + (i * (axisHeightPercent + axisSpacingPercent)) + '%',
      offset: false,
      lineWidth: 1
    });
    // build seriesOptions and other stuff ...
  });
});

$('#container').highcharts('StockChart', {
    yAxis: axisOptions,
    // other options ...
});

Link to JSFiddle 

$(function() {
  console.log('in annynymous()');
  //	var names = ['GBP_USD'], // Any One Currency, works [serise is as it should be]
  var names = ['GBP_USD', 'EUR_USD', 'USD_CHF'], // Three currencies [series are flat]
    seriesCounter = 0,
    seriesOptions = [],
    axisOptions = [],
    colors = Highcharts.getOptions().colors,
    containerHeight = $('#container').height(),

    numAxes = names.length,
    // percentage of height left out for spacing the 3 y-axes
    axisSpacingPercent = 5,
    // percentage of height occupied by each y-axis
    axisHeightPercent = (100 - (numAxes - 1) * axisSpacingPercent) / numAxes;

  console.log('starting to retrive data');

  $.each(names, function(i, name) {
    document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving data</B>';


    var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id=" + name;
    $.getJSON(url, function(data) {
      console.log("success with grabing json data for " + name);

      seriesOptions[i] = {
        name: name + ' Temperature',
        data: data,
        color: colors[i],
        type: 'line',
        yAxis: i
      };

      axisOptions.push({
        title: {
          text: name + 'Prices'
        },
        // settings for multiple panes in the chart
        height: '' + axisHeightPercent + '%',
        top: '' + (i * (axisHeightPercent + axisSpacingPercent)) + '%',
        offset: false,
        lineWidth: 1
      });

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter++;

      if (seriesCounter == names.length) {
        createChart();
      }
    });
  });

  // create the chart when all data is loaded
  function createChart() {

    console.log('in createChart()');
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    // Create a timer, to test how long this takes to load
    var start = +new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {

      chart: {
        events: {
          load: function(chart) {
            this.setTitle(null, {
              text: 'This chart was built on ' + new Date() + ' in ' + (new Date() - start) + 'ms'
            });


          }
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1hr'
        }, {
          type: 'hour',
          count: 3,
          text: '3hr'
        }, {
          type: 'hour',
          count: 12,
          text: '12hr'
        }, {
          type: 'day',
          count: 1,
          text: '1d'
        }, {
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'day',
          count: 5,
          text: '5d'
        }, {
          type: 'day',
          count: 7,
          text: '7d'
        }, {
          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: 'all',
          text: 'All'
        }],
        selected: 2
      },

      // NOTE: I added these lines
      // See the chart legend at the bottom of the chart now?
      // Click on 2 of the series to remove them, and notice how
      // the 3rd one expands to show all the points correctly
      legend: {
        enabled: true
      },

      yAxis: axisOptions,

      title: {
        text: 'Historical Instruments Data '
      },

      subtitle: {
        text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
      },

      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
        valueDecimals: 1
      },

      series: seriesOptions,

      exporting: {
        width: 1000
      }

    }, function(chart) {
      // Last point in graph...
      document.getElementById("loading").style.display = "none"; //hide the loading text

      showLastPointTooltip(chart);
    });
  };

});


function showLastPointTooltip(objHighStockchart) {
  // show tooltip for last point   
  var points = [];
  if (objHighStockchart) {
    for (var i = 0; i < objHighStockchart.series.length; i++)

      points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length - 1]);


    objHighStockchart.tooltip.refresh(points);


  };
  console.log('DONE')

};
<title>Multiple Currencies</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="loading" sytle="font-weight:bold;"></div>
<div id="container" style="height: 900px; min-width: 500px">

这类似于解决方案＃1，但是跨越不同的非重叠y轴将数据隔开。

solution 2

相关问题
最新问题