Question

我为不同的图表提供了不同的数据。所以我想在循环中显示数据。每次数据对于不同的图表都是不同的，而是使用不同的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++;
}

我想在每个图形上更改图形颜色。但是如果我在循环中添加不同的颜色，它将应用于具有最后循环索引值的所有图形。

参考链接是＆＃34; http://buffybeans.com/CryptoCurrency＆＃34; 请检查一下。

Answer 1

如果我是你，我可能会给所有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));
    }
  });
}

HighCharts Js循环图

1 个答案: