Как добавить всплывающую подсказку для Chartist Line Chart с данными Dynami c? - PullRequest
0 голосов
/ 29 февраля 2020

Я использовал график графика для моей страницы. Он был загружен динамическими c данными из базы данных. А также он показывает данные за день, неделю, месяц. Он работает нормально для всего диапазона. Моя проблема в том, что я не знаю, как показать подсказку для всей записи при наведении курсора, с данными Dynami c. Моя js кодировка

   (function () {
  var scoreChart = function scoreChart(id, labelList, series1List) {
    var scoreChart = new Chartist.Line('#' + id, {
      labels: labelList,
      series: [series1List]
    }, {
      lineSmooth: Chartist.Interpolation.simple({
        divisor: 2
      }),
      fullWidth: true,
      chartPadding: {
        right: 25
      },
      series: {
        "series-1": {
          showArea: false
        }
      },
      axisX: {
        showGrid: false
      },
      axisY: {
        labelInterpolationFnc: function labelInterpolationFnc(value) {
          return value ;
        },
        scaleMinSpace: 40
      },
      plugins: [Chartist.plugins.tooltip()],
      low: 0,
      showPoint: false,
      height: 300
    });

    scoreChart.on('created', function (data) {
      var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
      var width = data.svg.width();
      var height = data.svg.height();

      var filter = defs.elem('filter', {
        x: 0,
        y: "-10%",
        id: 'shadow' + id
      }, '', true);

      filter.elem('feGaussianBlur', { in: "SourceAlpha",
        stdDeviation: "24",
        result: 'offsetBlur'
      });
      filter.elem('feOffset', {
        dx: "0",
        dy: "32"
      });

      filter.elem('feBlend', { in: "SourceGraphic",
        mode: "multiply"
      });

      defs.elem('linearGradient', {
          id: id + '-gradient',
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 0
      }).elem('stop', {
          offset: 0,
          'stop-color': 'rgba(22, 141, 238, 1)'
      }).parent().elem('stop', {
          offset: 1,
          'stop-color': 'rgba(98, 188, 246, 1)'
      });

      return defs;
    }).on('draw', function (data) {
      if (data.type === 'line') {
        data.element.attr({
          filter: 'url(#shadow' + id + ')'
        });
      } else if (data.type === 'point') {

        var parent = new Chartist.Svg(data.element._node.parentNode);
        parent.elem('line', {
          x1: data.x,
          y1: data.y,
          x2: data.x + 0.01,
          y2: data.y,
          "class": 'ct-point-content'
        });
      }
      if (data.type === 'line' || data.type == 'area') {
        data.element.animate({
          d: {
            begin: data.index,
            dur: 1000,
            from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
            to: data.path.clone().stringify(),
            easing: Chartist.Svg.Easing.easeOutQuint
          }
        });
      }
    });
  };


  var DayLabelList = <?php echo $daydate; ?>;
  var DaySeries1List = {
    name: "series-1",
    data: <?php echo $daysales; ?>
  };

  var WeekLabelList = <?php echo $weeklydate; ?>;
  var WeekSeries1List = {
    name: "series-1",
    data: <?php echo $weeklysales; ?>
  };

  var MonthLabelList = <?php echo $monthlydate; ?>;
  var MonthSeries1List = {
    name: "series-1",
    data: <?php echo $monthlysales; ?>
  };

  var createChart = function createChart(button) {
    var btn = button || $("#ecommerceChartView .chart-action").find(".active");

    var chartId = btn.attr("href");
    switch (chartId) {
      case "#scoreLineToDay":
        scoreChart("scoreLineToDay", DayLabelList, DaySeries1List);
        break;
      case "#scoreLineToWeek":
        scoreChart("scoreLineToWeek", WeekLabelList, WeekSeries1List);
        break;
      case "#scoreLineToMonth":
        scoreChart("scoreLineToMonth", MonthLabelList, MonthSeries1List);
        break;
    }
  };

  createChart();
  $(".chart-action li a").on("click", function () {
    createChart($(this));
  });
})();

Заранее спасибо. Диаграммы содержат 3 части для дня / месяца / недели. При каждом нажатии на них отображаются соответствующие данные

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...