codeLink: https://codepen.io/wuyangqin/pen/OJEeQBg
var swiper = new Swiper(".swiper-container", {
height: 400,
width: 240,
loop: true,
autoplay:{
delay: 2000
},
direction: 'vertical',
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 30,
freeMode: true,
freeModeSticky: true,
mousewheel: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
dragSize: 40,
},
virtual: {
slides: (function() {
var slides = [];
for (var i = 0; i < 4; i += 1) {
slides.push(
'<img src="https://picsum.photos/600/600/?image=' +
(i + 1) +
'"/><p>' +
(i + 1) +
"</p>"
);
}
return slides;
})()
}
});
When I set Loop:true, Swiper will stop when it reachEnd;
I tried the issue https://github.com/nolimits4web/swiper/issues/3070 But still not working
Expect loop and virtual working together
Related
error image
` // References swiper slider start here ------------------------------>
var mySwiper = new Swiper(".references-slider", {
slidesPerView: 1,
initialSlide: 1,
centeredSlides: true,
spaceBetween: 32,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".right-arrow",
prevEl: ".left-arrow",
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
snapOnRelease: true,
direction : 'horizontal'
},
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
});
mySwiper.setTranslate(-72,0,0);`
Also the setTranslate is not working.
Please help me to fix and use swiper function as how ?
the issue im facing is when i end 2nd chart like 'chart.render()' , 2nd chart gets value that i selected in first chart but when i click on another value in first chart , instead of update 2nd chart div , it creats another div vertically.
here is my chart.
i'm getting value from controlle in chart.
var app = #json($newval);
var options = {
series: app,
chart: {
events: {dataPointSelection:function (event, chartContext, config) {
var value= config.w.config.series[config.dataPointIndex]
$( "#chart2" ).load(window.location.href + " #chart2" );
secondchart(value);
}
},
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
//second chart starts...
function secondchart(value) {
//in this console.log im getting correct value
console.log(value)
var options = {
series: [{
data: [value]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
};
chart.render()
}
</script>```
so here is code what i want do do exactly,
<script>
var app = #json($newval);
var options = {
series: app,
chart: {
events: {
dataPointSelection: function (event, chartContext, config) {
var value = config.w.config.series[config.dataPointIndex]
secondchart(value);
}
},
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
function secondchart(value) {
var cat = #json($cat);
var options = {
series: [{
data: [value,value]
}],
chart: {
redrawOnParentResize: true,
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: [cat
],
}
};
// $( "#chart2" ).load(window.location.href + " #chart2" );
var chart = new ApexCharts(document.querySelector("#chart2"), options);
debugger
if ($("#chart2") == null) {
console.log( $("#chart2"));
chart.render()
} else {
$("#chart2").empty();
console.log( $("#chart2"));
chart.render()
}
}
</script>
I am using a Nuxt application with vue-charts. I have a barchart that I trying to see if there is a way to callback the numbers next to the chart. Some what like this
My barchart options look like this now.
barLostDollarChartOptions: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
title: {
display: true,
text: 'Daily NP Opportunity Costs'
},
scales: {
yAxes: [{
//Sets the Max value after re-rendering chart
beforeFit: function (scale){
let maxValue = 0
if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
scale.chart.config.data.datasets.forEach(dataset => {
if (dataset && dataset.data) {
dataset.data.forEach(value => {
if (value > maxValue) {
maxValue = value
}
})
}
})
}
// After, set max option !!!
scale.options.ticks.max = maxValue
},
// afterFit: function (scale){
// console.log('yAxes',scale)
// let arr = Object.values(scale.chart.config.data.datasets[0].data);
// let min = Math.min(...arr);
// let max = Math.max(...arr);
// maxValueArray.push(max)
// // console.log( `Min value: ${min}, max value: ${max}` );
//
// }
}
],
xAxes: [{
ticks:{
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
// console.log(value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
},
},
}]
}
},
But I am trying to see if there is a way that I can call back the number and render it next to the bar? any ideas?
You can use the datalabels plugin for this:
Chart.plugins.register(ChartDataLabels);
var options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
formatter: (val) => ('$' + val)
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
</body>
I'm trying to update the html of a tabPanel. The scrollbar is there on the initial load, but then on update the scroll bar disappears.
This is my code:
var text = "a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>";
years = [];
items = [];
for(i=this_year; i>2002; i--) {
years.push(i);
}
for(i=0; i<parents.length; i++) {
items.push({
xtype: 'tabpanel',
title: years[i],
id: 'tabs' + years[i],
activeTab: 0,
autoScroll: true,
html: text, // this works just fine
});
}
var tp = new Ext.TabPanel({
renderTo: div,
id: 'tabs',
activeTab: 0,
items: items,
autoFit: true,
height: 500,
width: 500,
listeners: {
'tabchange': function(tabPanel, tab){
// dynamically update the html
}
}
});
// but if i instead use this the scrollbar disappears
Ext.get('tabs' + 2014).update(text);
Is there some other way to update the HTML?
Got it working with contentEl and jQuery's appendTo:
years = [];
items = [];
for(i=this_year; i>2002; i--) {
years.push(i);
}
for(i=0; i<parents.length; i++) {
$('<div id="tabs' + years[i] + '"></div>').appendTo("#some_div");
items.push({
xtype: 'tabpanel',
title: years[i],
id: 'foo-tabs' + years[i],
activeTab: 0,
autoScroll: true,
contentEl: 'tabs' + years[i],
});
}
var tp = new Ext.TabPanel({
renderTo: div,
id: 'foo-tabs',
activeTab: 0,
items: items,
autoFit: true,
height: 500,
width: 500,
listeners: {
'tabchange': function(tabPanel, tab){
}
}
});
$('some html').appendTo('#tabs' + year);
I am using an editor for inline edit tree node value, when lage text comes its position changing? following is the code i made for test this scenario.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "ong label for testing long options test field.50", leaf: true },
{ text: "long label for testing long options test field.50 long label for testing log option test field. 100", leaf: true },
{ text: "option4", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 300,
height: 250,
store: store,
rootVisible: false,
defaultRootId: 0,
renderTo: Ext.getBody(),
listeners: {
itemdblclick: function (View, record, item, index, e, eOpts) {
var editor = new Ext.Editor({
ignoreNoChange: true,
revertInvalid: true,
width: 235,
shadow: false,
//offsets: [-150, 0],
hideEl: false,
field: {
xtype: 'textfield',
maxLength: 500,
enforceMaxLength: true,
allowBlank: false
}
});
editor.startEdit(item, record.get('text'));
editor.on('complete', function (me, value) {
if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") {
record.set('text', value);
}
}, item, { single: true });
}
}
});
I am using Extjs4.1 version
First you should change alingment of editor to tl (top-left). It should be then always aligned to the left side of node. If you want to align editor to text in node, then you should also adjust offset.
Example:
itemdblclick: function (View, record, item, index, e, eOpts) {
var item = Ext.get(item);
var images = item.down('td').query('.x-tree-elbow, .x-tree-elbow-empty, .x-tree-elbow-end, .x-tree-elbow-line');
var x = 0;
for (var i = 0, ilen = images.length; i < ilen; ++i) {
x += Ext.get(images[i]).getWidth();
}
var editor = new Ext.Editor({
alignment: 'tl',
ignoreNoChange: true,
revertInvalid: true,
width: 235 - x,
shadow: false,
offsets: [x, 0],
hideEl: false,
field: {
xtype: 'textfield',
maxLength: 500,
enforceMaxLength: true,
allowBlank: false
}
});
editor.startEdit(item, record.get('text'));
editor.on('complete', function (me, value) {
if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") {
record.set('text', value);
}
}, item, { single: true });
}