HighCharts Js графы в цикле - PullRequest
Новая
       10

HighCharts Js графы в цикле

0 голосов
/ 03 мая 2018

У меня разные данные для разных графиков. Поэтому я хочу, чтобы данные отображались в цикле. Каждый раз данные различны для разных графиков, лучше использовать разные div. Я помещаю div в цикл

Базовая конфигурация: 

var baseConfig = {
  credits: {
    enabled: false
  },
  chart: {
    zoomType: 'x'
  },
  tooltip: {
    pointFormat: 'BTC Price: <b>{point.y:,.7f}</b>',
    percentageDecimals: 1
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    visible: false
  },
  yAxis: {
    title: {
      text: 'Exchange rate'
    },
    visible: false
  },
  plotOptions: {
    area: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      },
      marker: {
        radius: 2
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  }

};
$('#container_' + coin_ids).highcharts(
  $.extend(baseConfig, data1)
);
$(".graph_div").each(function() {
  var coin_id = $(this).attr("data-coin");
  get_coin_data(coin_id);
});

get_coin_data: 

function get_coin_data(coin_ids) {
  $.ajax({
    type: 'GET',
    url: '<?php echo base_url() ?>',
    data: {
      coin_id: coin_ids
    },
    contentType: "application/json; charset=utf-8;",
    dataType: 'json',
    success: function(datadata) {
      var data1 = {
        series: [{
          name: '',
          type: 'area',
          data: datadata,
          showInLegend: false,
          allowDecimals: true,
          color: '' + jj + ''
        }],
      };
      $('#container_' + coin_ids).highcharts($.extend(baseConfig, data1));
    }
  });
  jj++;
}



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

ссылка на ссылку "http://buffybeans.com/CryptoCurrency" Пожалуйста, проверьте это.

1 Ответ

0 голосов
/ 03 мая 2018

На вашем месте я бы, наверное, дал бы всем div цвет, определяемый как: 

<div id="container_BTC" data-coin="BTC" data-color="#f442c8"></div>

Тогда вы можете передать цвет get_coin_data так: 

$('#container_' + coin_ids).highcharts(
  $.extend(baseConfig, data1)
);
$(".graph_div").each(function() {
  var coin_id = $(this).attr("data-coin");
  var coin_color = $(this).attr("data-color");
  get_coin_data(coin_id, coin_color);
});

И установите это так: 

function get_coin_data(coin_ids, coin_color) {
  $.ajax({
    type: 'GET',
    url: '<?php echo base_url() ?>',
    data: {
      coin_id: coin_ids
    },
    contentType: "application/json; charset=utf-8;",
    dataType: 'json',
    success: function(datadata) {
      var data1 = {
        series: [{
          name: '',
          type: 'area',
          data: datadata,
          showInLegend: false,
          allowDecimals: true,
          color: coin_color
        }],
      };
      $('#container_' + coin_ids).highcharts($.extend(baseConfig, data1));
    }
  });
}
...