0
nasıl kullanabilir aynı sayfada birden fazla listelerinde aynı grafik birden çok kez same page yılında same data ile?Highcharts -
aşağıda gibi çalışıyorum, ama sadece bunun gibi her highchart çağrısına taşımak için
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>
$(function() {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('.areaChartTwoWay').highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Days', },
text: 'Date',
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Legend 2',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Legend 1',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}));
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>
** @ Vasyl Moskalov ** ... Simply awesome :) ... Herhangi bir yol var mı, her tablo için farklı efsaneler yapılandırabilir miyim? – Reddy
Neden değil? Sanırım yapabilirsin. –
** @ Vasyl Moskalov **, Çizelgelerde sadece yeni başlayan biri olduğum için, Eğer sakıncası yoksa, aynı zamanda bana da rehberlik edebilir misiniz? Lütfen? – Reddy