Nano Hash - криптовалюты, майнинг, программирование

как динамически изменить столбчатую диаграмму на зеркальную диаграмму с помощью highchart

Что ж, сегодня я столкнулся с проблемой highchart, где я пытаюсь исправить что-то вроде следующего: 1. Я делаю вызов ajax, а затем изменяю данные ряда гистограммы следующим образом:

if(data == 2) {

chart.series[0].setData([
['2009', 140],['2010', 200],['2011',   100],
['2009', -200],['2010',   -120],['2011', -240]]);
}

2. Я хочу отобразить эту информацию в зеркальной диаграмме с двумя именами групп «Великобритания», «Австралия», чтобы данные отображались так: Великобритания - 2009, 2010, 2011 и то же самое с AUS 2009, 2010, 2011 (но с отрицательные значения) 3. Демонстрация того, что мне нужно, находится здесь http://www.highcharts.com/demo/column-negative

Короче говоря, если ajax принесет данные = 2 со страницы php, я хотел преобразовать значения гистограммы в отрицательные значения диаграммы с групповым рядом, например, прикрепить демонстрационную ссылку highcahrt.

Ребята, я так долго пытаюсь решить эту проблему, и мне очень нужна помощь. Так что будет здорово, если кто-нибудь знает, как мне поступить с chart.series[0].setData или любым другим методом. Заранее спасибо

Привет, я хочу, чтобы мой график был таким динамически введите здесь описание изображения

и я получаю такой ответ сразу после предложения ответа: введите здесь описание изображения

Код:

                                function requestData() {
                                    chart = $('#column_chart').highcharts();

                                    $.ajax({
                                        type: "POST",
                                        url: "graph_advanced_file.php",
                                        data: {sliceName: ch},
                                        success: function(data) {
                                            //store local storage.....

                                            localStorage.setItem("current_item", ch);

                                            //alert(data);
                                            //Now, check whatever data is coming through serve accordingly......to load some data.....of that perticular....
                                            if(data == 1) {
                                                //Travel..so get series data....
                                                <?php
                                                    //$each_slice_series = array();
                                                    //$each_slice_series = getSliceInfo(1);
                                                    //$sliceId = 1;
                                                    //call and get the figure....
                                                ?>
                                                chart.series[0].setData([
                                                ['Mand',   200],
                                                ['Sand',   800],
                                                ['Land', 700]]);
                                            }
                                            if(data == 2) {
                                                //Garment....So get series data....
                                                var options = {
                                                  chart: {
                                                      type: 'column'
                                                  }, 
                                                  plotOptions: {
                                                      series: {
                                                          stacking: 'normal'
                                                      }
                                                  }
                                                };

                                               //Load new options to chart   
                                               chart.setOptions(options);
                                                chart.series[0].setData([
                                                  ['2009', 140],['2010', 200],['2011',   100],
                                                  ['2009', -200],['2010',   -120],['2011', -240]]);

                                               chart.series[0].name="Uk";

                                               chart.series[1].setData([
                                                      ['2009', 180],['2010', 100],['2011',   150],
                                                      ['2009', -250],['2010',   -130],['2011', -270]]);

                                               chart.addSeries({ 
                                                  name: "AUS", 
                                                  data: [ ['2009', 180],
                                                          ['2010', 100],
                                                          ['2011', 150], 
                                                          ['2009', -250],
                                                          ['2010', -130],
                                                          ['2011', -270]] 
                                               });

                                               chart.redraw();

                                                //chart.series[0].setData([
                                                //['2009', 140],['2010', 200],['2011',   100],['2012', 130],['2013', 190],['2014', 220],['2015', 230],
                                                //['2009', -200],['2010',   -120],['2011', -240],['2012', -220],['2013', -150],['2014', -100],['2015', -250],
                                                //]);

                                            }

Теперь этот requestData вызывается:

$('#column_chart').highcharts({
                                     chart: {
                                            type: 'column',
                                            events: {
                                                load: requestData
                                                //click: changeLables
                                            }
                                        },
                                        title: {
                                            text: 'Total Sale of each products'
                                        },
                                        subtitle: {
                                            text: '(Click on product name to display monthly details)'
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        xAxis: {
                                            type: 'category'
                                        },
                                        yAxis: {
                                            title: {
                                                text: 'Products Sale'
                                            }
                                        },

                                        legend: {
                                            enabled: false
                                        },
                                        series: [{
                                            name: 'Product Sale',
                                            colorByPoint: true,
                                            data: [{
                                                name: 'Mand',
                                                y: 200<?php //echo $each_slice_series[0];?>
                                            }, {
                                                name: 'Land',
                                                y: 800<?php //echo $each_slice_series[1];?>
                                            }, {
                                                name: 'Sand',
                                                y: 700<?php //echo $each_slice_series[2];?>
                                            }]
                                        }]
                                    });//End of chart......

Дай мне знать


Ответы:


1

Если вы хотите динамически изменить столбчатую диаграмму на зеркальную диаграмму, вы должны сделать это.

if(data == 2) {

   //Create options      
   var options = {
      chart: {
          renderTo: 'container',
          type: 'bar'
      }
    };

   //Load new options to chart   
   chart.setOptions(options);

   //Load new series
   chart.series[0].setData([
      ['2009', 140],['2010', 200],['2011',   100],
      ['2009', -200],['2010',   -120],['2011', -240]]);
   }
}

Изменить

Если у вас есть два данных, а также вы хотите сгруппировать серии по имени, вы должны сделать это.

if(data == 2) {



$('#column_chart').highcharts({ 
   chart: { 
     type: 'column' 
   },   
   plotOptions: { 
     series: { 
       stacking: 'normal' 
     } 
   }, 
   series: [{ 
     name: 'UK', 
     data: [ 
           ['2009', 140],['2010', 200],['2011', 100], 
           ['2009', -200],['2010', -120],['2011', -240]] 
     }, { 
     name: 'AUS', 
     data: [['2009', 180], 
           ['2010', 100], 
           ['2011', 150], 
           ['2009', -250], 
           ['2010', -130], 
           ['2011', -270]] 
           } ] 
    });
}

Надеюсь, это поможет вам.

30.07.2015
  • Нет, братан, это не так, потому что то, что я хочу, настроено так же, как uk aus, и почти так же, как ссылка в моем вопросе. 30.07.2015
  • Проверьте мой отредактированный ответ. Я думаю, это так, как вы хотите. Очевидно, данные Aus не настоящие, только для примера. 30.07.2015
  • Привет, братан, выдает ошибку TypeError: chart.series[1] is undefined 30.07.2015
  • Хорошо, это происходит потому, что series[1] он не инициализирован. Вы должны создать его. Щека теперь мой ответ. 30.07.2015
  • Привет, братан, я думаю, что мы оба действительно закрыты, чтобы ответить, но как я получаю вывод, как показано выше, прикрепите скриншот, и я все еще получаю эту ошибку. 30.07.2015
  • В порядке. Теперь, когда я увидел этот пример, он стал более ясным. В опциях, чтобы выглядеть как в примере, вы должны изменить тип диаграммы на column и добавить stacking: 'normal'. Посмотрите пример. 30.07.2015
  • Братан, все еще застрял, о нет .... TypeError: chart.setOptions не является функцией graph_advanced.php: 1030: 15 TypeError: chart.setOptions не является функцией 30.07.2015
  • Проверьте мой пример Jsfiddle. Возможно, это поможет больше, чем я. jsfiddle.net/wSD7s/62 30.07.2015
  • Давайте продолжим обсуждение в чате. 30.07.2015
  • Привет, братан, спасибо за скрипку, но посмотри на эту проблему, когда я использую chart.setOptions(options), я получаю сообщение об ошибке, а также код выше этого предложения, кажется, здесь не работает. TypeError: chart.setOptions не является функцией 30.07.2015
  • Привет, братан, я не нашел идеального ответа, но все же я принимаю твой ответ как ответ, потому что ты очень помог мне даже приблизиться к ответу. 30.07.2015
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..