Question

我有一个用Slick Carousel创建的同步时间轴。它工作得很好。我现在正试图让时间线中的数据点按照日期按比例分配。我想这将是使用数据属性和jquery但不知道如何做到这一点。有什么想法吗？

JS

jQuery(document).ready(function() {
    jQuery('.timelineSlider').slick({
        slidesToShow: 3,
        centerMode: true,
        centerPadding: '100px',
        variableWidth: true,
        slidesToScroll: 1,
        fade: false,
        infinite: true,
        useTransform: true,
        speed: 400,
        cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)',
    });
    jQuery('.timelineSliderNav')
        .on('init', function(event, slick) {
            jQuery('.timelineSliderNav .slick-slide.slick-current').addClass('is-active');
        })

        .slick({
            slidesToShow: 20,
            slidesToScroll: 10,
            dots: false,
            focusOnSelect: false,
            infinite: false,
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 5,
                }
            }, {
                breakpoint: 640,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 4,
                }
            }, {
                breakpoint: 420,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                }
            }]
        });

    jQuery('.timelineSlider').on('afterChange', function(event, slick, currentSlide) {
        jQuery('.timelineSliderNav').slick('slickGoTo', currentSlide);
        var currrentNavSlideElem = '.timelineSliderNav .slick-slide[data-slick-index="' + currentSlide + '"]';
        jQuery('.timelineSliderNav .slick-slide.is-active').removeClass('is-active');
        jQuery(currrentNavSlideElem).addClass('is-active');
    });

    jQuery('.timelineSliderNav').on('click', '.slick-slide', function(event) {
        event.preventDefault();
        var goToSingleSlide = jQuery(this).data('slick-index');

        jQuery('.timelineSlider').slick('slickGoTo', goToSingleSlide);
    });
});

CodePen

Answer 1

JS

        //serialize the ASP.NET model data to a JSON object
        var domainName = @Json.Serialize(Model.DomainName);
        var domainCount = @Json.Serialize(Model.DomainCount);
        //the JSON object needs to be cast as a number for the chart
        for (var i = 0; i < domainCount.length; i++) {
            domainCount[i] = parseInt(domainCount[i]);
        }
        //Use 'DataTable' rather than arrayToDataTable in order to use
        // the 'addRows' function
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Category');
        data.addColumn('number', 'Number');
        //loop through the serialized array rather than the model data
        // using 'addRows'
        for (i = 0; i < domainCount.length; i++) {
            data.addRows([
                [domainName[i], domainCount[i]]
            ]);
        }

        var options = {
            'title': 'Chart Title',
        }

        var chart = new google.visualization.PieChart((document.getElementById('MyChart')));
        chart.draw(data, options);

CSS

jQuery('.timelineSliderNav .slick-slide').each(function() {
    $(this).append('<p>'+$(this).attr('data-date')+'</p>');
});

Edited Codepen

Answer 2

得到它......这是codepen和js下面的工作：

//Timeline Dates
var dates = ["01/01/1978", "04/01/1979", "02/01/1982", "09/01/1986", "08/01/1989", "07/01/1991", "03/01/1993", "12/01/1997", "08/01/2001", "01/01/2002", "03/01/2005", "04/01/2006", "01/01/2008", "07/01/2011", "09/01/2012", "06/01/2014", "08/01/2016", "10/01/2016", "02/01/2017", "04/01/2018"];

//Main function. Draw your circles.
function makeCircles() {

//Set day, month and year variables for the math
    var first = dates[0];
    var last = dates[dates.length - 1];

    var firstMonth = parseInt(first.split('/')[0]);
    var firstDay = parseInt(first.split('/')[1]);
    var firstYear = parseInt(first.split('/')[2]);


    var lastMonth = parseInt(last.split('/')[0]);
    var lastDay = parseInt(last.split('/')[1]);
    var lastYear = parseInt(last.split('/')[2]);

//Integer representation of the last day
    var lastInt = ( ((lastYear - firstYear) * 365) + (lastMonth - firstMonth) * 30) + (lastDay - firstDay);

//Draw first date circle
  $(".timelineSliderNav").append('<span style="left: ' + 0 + '%;"><i class="fa fa-circle" aria-hidden="true"></i></span>');

//Loop through middle dates
  for (i = 1; i < dates.length - 1; i++) {
    var thisMonth = parseInt(dates[i].split('/')[0]);
    var thisDay = parseInt(dates[i].split('/')[1]);
    var thisYear = parseInt(dates[i].split('/')[2]);

    //Integer representation of the date
    var thisInt =  ( ((thisYear - firstYear) * 365) + (thisMonth - firstMonth) * 30) + (thisDay - firstDay);

    //Integer relative to the first and last dates
      var relativeInt = thisInt / lastInt;

    //Draw the date circle
      $(".timelineSliderNav").append('<span style="left: ' + relativeInt * 100 + '%;"><i class="fa fa-circle" aria-hidden="true"></i></span>');
  }

  //Draw the last date circle
  $(".timelineSliderNav").append('<span style="left: ' + 99 + '%;"><i class="fa fa-circle" aria-hidden="true"></i></span>');
}

makeCircles();

如何设置时间线上事件之间的相对距离？

2 个答案: