Множество высококлассных чартов на одной странице - PullRequest
Новая
       0

Множество высококлассных чартов на одной странице

1 голос
/ 28 февраля 2020

Я пытаюсь заставить страницу отображать динамическое c количество диаграмм, я посмотрел на этот метод из другой библиотеки, но из-за недостатка знаний js и html я не могу конвертировать в старшие чарты

Я хочу получить следующее: https://www.chartjs.org/samples/latest/charts/line/point-styles.html

       <html>
        <div class="container"></div>
    </html>

<script>
     window.onload = function() {
           var container = document.querySelector('.container');
           somedata.forEach(function(snapshot) {
                var div = document.createElement('div');
                div.classList.add('chart-container');
                container.appendChild(div);
                var config = createConfig(snapshot);

               new Highcharts.stockChart(container, config);


               });
        };
</script>

Ответы [ 3 ]

1 голос
/ 02 марта 2020

На сайте Highcharts есть несколько способов динамического рендеринга нескольких графиков.

Пожалуйста, ознакомьтесь с этой демонстрацией: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/

И я думаю, что в случае создания нескольких графиков функция Highcharts.merge может быть полезной, как и при использовании здесь: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/

API: https://api.highcharts.com/class-reference/Highcharts# .merge% 3CT% 3E

А вот действительно простая демонстрация с созданием диаграмм используя простой l oop.

Демо: https://jsfiddle.net/BlackLabel/qaydxnph/

var mainOptions = {
  chart: {
    backgroundColor: 'green'
  }
}

var data = [];


for (var i = 0; i < 5; i++) {
//create div dynamically
  var iDiv = document.createElement('div');
  iDiv.id = 'container' + i;
  document.getElementsByTagName('body')[0].appendChild(iDiv);

  data.push(Math.random() * i)

//create charts
  Highcharts.stockChart(iDiv.id, Highcharts.merge(mainOptions, {
    series: [{
      data: data
    }]
  }))
}
0 голосов
/ 29 февраля 2020

Я не знаю, насколько это адекватно, но у меня это сработало 

function createConfig(snapshot) {

        let profitInUSDT = snapshot.profitInUSDT,
            profitInBTC = snapshot.profitInBTC,
            xAxisDate = snapshot.date;


        profitInUSDT = profitInUSDT.map((val, i) => [xAxisDate[i], val])
        profitInBTC = profitInBTC.map((val, i) => [xAxisDate[i], val])


        return {

            title: {
                useHTML: true,
                text:   '<a href="/tracker/' + snapshot.name + '"> ' + snapshot.name + ' </a>'
            },
            navigator: {
                enabled: false
            },



            rangeSelector: {
                selected: 6,
                enabled: false,

                },

            scrollbar: {
                enabled: false
            },
            yAxis: {
                opposite:false,
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    },
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
            legend: {
                enabled: true,

            },
            tooltip: {
                pointFormat: '{series.name} <b>{point.y}%</b>',

                valueDecimals: 2,
                split: true
            },
            series: [{
                name: 'profit in USDT',
                data: profitInUSDT,
                color: '#21a27c',
                tooltip: {
                    valueDecimals: 2
                }
            },
                {
                    name: 'profit in BTC',
                    data: profitInBTC,
                    color: '#f79413',
                    tooltip: {
                        valueDecimals: 2
                    }
                }
            ]

        };
    }



    window.onload = function() {
    	var cont = document.querySelector('.container');
 
        [{"name":"test","description":"test","date":[1577203210000,1577206808000,1577210408000],"profitInBTC":[0.0,-0.79,0.87],"profitInUSDT":[0.0,-0.51,0.36]},{"name":"puz","description":"futures","date":[1582665302212,1582668005727,1582671603990],"profitInBTC":[0.0,-0.5,14.72],"profitInUSDT":[15.4,15.41,15.41]}].forEach(function(snapshot) {

            var container = document.createElement('div');
            container.className = 'chart-container';
            cont.append(container);
						
            document.body.append(cont);

            var config = createConfig(snapshot);

            Highcharts.stockChart(container, config);


        });

    };
.chart-container {
            width: 80%;
            margin-left: 40px;
            margin-right: 40px;
            margin-bottom: 40px;
        }
.container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
<script src="https://code.highcharts.com/stock/highstock.js"></script>


<div class="container">
	</div>
0 голосов
/ 29 февраля 2020

Я нашел похожее решение, используя php, может быть, вы можете преобразовать этот код в соответствии с вашими потребностями (Исходное сообщение) .

Код ниже: 

        <script>
        titles = <?php echo json_encode($graphTitles)?>;
        //Loop through the graphs
        for (var graphNO = 0; graphNO < titles.length; graphNO++)
        {                               
           //CREATE NEW CONTAINER
            var container = document.createElement('div'); 
            document.body.appendChild(container);er);

            dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
            //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(container).highcharts({
                  title: {
                      text: titles[graphNO]
                  },
                  xAxis: {
                      categories: dates
                  },
                  series: [{
                      type: 'column',
                      color: 'gold',
                      name: 'Created Issues',
                      data: createdIssues.map(Number)
                  }, 
                   //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
              });
            });
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...