一页上有多个高库存图表
[英]Multiple highstock charts on one page
问题描述
I'm trying to make the page display a dynamic number of charts, I looked at this method from another library, but in view of the lack of knowledge js and html, I can't convert to highcharts
我试图让页面显示动态数量的图表，我从另一个库中查看了这个方法，但是鉴于缺乏js和html的知识，我无法转换为highcharts
I want to get the following: https://www.chartjs.org/samples/latest/charts/line/point-styles.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
2 2020-03-02 10:19:42
From the Highcharts site, there are a few ways to render multiple charts dynamically.从 Highcharts 站点，有几种动态呈现多个图表的方法。
Please get familiar with this demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/请熟悉这个演示： https : //jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/
And I think that in case of creating the multiple charts Highcharts.merge feature could be useful like it is used here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/而且我认为在创建多个图表的情况下 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 API： https : //api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E
And here is a really simple demo with creating charts using simple loop.这是一个非常简单的演示，使用简单循环创建图表。
Demo: https://jsfiddle.net/BlackLabel/qaydxnph/演示： 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
}]
}))
}
解决方案2
1 已采纳 2020-02-29 17:04:48
I don't know how adequate this is, but it worked for me我不知道这是否足够，但它对我有用
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>
解决方案3
0 2020-02-28 21:20:40
I found a similar solution using php, maybe you can convert this code to your needs (Original post) .我使用 php 找到了一个类似的解决方案，也许您可以将此代码转换为您的需要（原帖） 。
The code is below:代码如下：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.