Блог

Главная - Вопросы по программированию - Apexcharts, устанавливающий атрибут intersect как true, не отображает всплывающую подсказку при наведении курсора на точку данных

Apexcharts, устанавливающий атрибут intersect как true, не отображает всплывающую подсказку при наведении курсора на точку данных

#javascript #apexcharts

#javascript #apexcharts

Вопрос:

Я пытаюсь отобразить всплывающую подсказку при наведении курсора на точку данных ряда. Что я нашел в библиотечных документах, в нем говорится:

intersect: Show tooltip only when user hovers exactly over datapoint.

Настройка intersect: true не работает, и всплывающая подсказка не отображается при наведении курсора мыши на определенную точку данных.

 var options = {
  colors: ['#A6295F', '#254AA0'],
  chart: {
    id: 'Chart',
    zoom: {
      enabled: false
    }
  },
  series: [
     {
       name: "Series 1",
        data: [
      50,
      64,
      65,
      55,
      55,
      59,
      58,
      61,
      53,
      64,
      52,
      64,
      70,
      62,
      64,
      54,
      68,
      51,
      59,
      58,
      59,
      53,
      58,
      56,
      55,
      54,
      53,
      60,
      67,
      53,
      53,
      52,
      54,
      54,
      53,
      50,
      60,
      53,
      60,
      70,
      55,
      70,
      70,
      66,
      62,
      60,
      60,
      65,
      56,
      55,
      67,
      52,
      70,
      57,
      58,
      62,
      58,
      68,
       ]
     },
    {
      name: "Series 2",
      data: [
      69,
      59,
      66,
      63,
      66,
      54,
      64,
      52,
      58,
      59,
      53,
      58,
      64,
      67,
      56,
      58,
      62,
      70,
      66,
      64,
      67,
      63,
      69,
      54,
      53,
      62,
      56,
      55,
      51,
      57,
      55,
      55,
      55,
      51,
      63,
      68,
      63,
      56,
      53,
      64,
      61,
      70,
      58,
      51,
      51,
      63,
      57,
      62,
      50,
      67,
      69,
      65,
      68,
      52,
      63,
      66,
      55,
      61,
      ]
    }
  ],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight',
    width: 2,
    colors: ['#A6295F', '#254AA0'],
  },
  grid: {
    borderColor: '#E0E0E0',
    xaxis: {
      lines: {
        show: false
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    }
  },
  tooltip: {
    shared: false,
    intersect: true,
    custom({ series, dataPointIndex, w }) {
      const date = w.config.xaxis.categories[dataPointIndex];

      return `<div class="flex flex-col border-coal-200 rounded-md shadow-md">
              <p class="p-1 bg-coal-100 font-bold">${date}</p>
              </div>`;
    },
  },
  xaxis: {
    type: 'datetime',
    categories: [
  'Jan 01, 2021',
  'Jan 02, 2021',
  'Jan 03, 2021',
  'Jan 04, 2021',
  'Jan 05, 2021',
  'Jan 06, 2021',
  'Jan 07, 2021',
  'Jan 08, 2021',
  'Jan 09, 2021',
  'Jan 10, 2021',
  'Jan 11, 2021',
  'Jan 12, 2021',
  'Jan 13, 2021',
  'Jan 14, 2021',
  'Jan 15, 2021',
  'Jan 16, 2021',
  'Jan 17, 2021',
  'Jan 18, 2021',
  'Jan 19, 2021',
  'Jan 20, 2021',
  'Jan 21, 2021',
  'Jan 22, 2021',
  'Jan 23, 2021',
  'Jan 24, 2021',
  'Jan 25, 2021',
  'Jan 26, 2021',
  'Jan 27, 2021',
  'Jan 28, 2021',
  'Jan 29, 2021',
  'Jan 30, 2021',
  'Jan 31, 2021',
  'Feb 01, 2021',
  'Feb 02, 2021',
  'Feb 03, 2021',
  'Feb 04, 2021',
  'Feb 05, 2021',
  'Feb 06, 2021',
  'Feb 07, 2021',
  'Feb 08, 2021',
  'Feb 09, 2021',
  'Feb 10, 2021',
  'Feb 11, 2021',
  'Feb 12, 2021',
  'Feb 13, 2021',
  'Feb 14, 2021',
  'Feb 15, 2021',
  'Feb 16, 2021',
  'Feb 17, 2021',
  'Feb 18, 2021',
  'Feb 19, 2021',
  'Feb 20, 2021',
  'Feb 21, 2021',
  'Feb 22, 2021',
  'Feb 23, 2021',
  'Feb 24, 2021',
  'Feb 25, 2021',
  'Feb 26, 2021',
  'Feb 27, 2021',
  'Feb 28, 2021'
   ],
    title: {
      text: 'Date'
    },
    labels: {
      format: 'MMM, yyyy',
      showDuplicates: false,
      style: {
        cssClass: 'apexcharts-xaxis-datatime-label'
      }
    },
    tooltip: {
      enabled: false
    }
  },
  yaxis: {
    forceNiceScale: true,
    min: 0,
    title: {
      text: 'USD'
    },
  },
  legend: {
    markers: {
      radius: 2
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render(); 
 * {
  font-family: 'Poppins', sans-serif;
}

#chart {
  max-width: 760px;
  margin: 35px auto;
  opacity: 0.9;
}

#timeline-chart .apexcharts-toolbar {
  opacity: 1;
  border: 0;
} 
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

Я добавил код выше. У меня есть пользовательская всплывающая подсказка, shared: false и intersect: true это означает, что я не хочу, чтобы она была общедоступной и пересекалась. Вывод кода показывает, что при наведении курсора мыши на конкретную точку данных всплывающая подсказка не отображается, и маркер не добавляется, чтобы показать, что он был наведен.

Могу ли я что-нибудь с этим поделать?

Ответ №1:

По умолчанию размер маркеров установлен на 0 (https://apexcharts.com/docs/options/markers /) так что вы не можете навести на него курсор мыши. Вам нужно установить размер маркера> 0 (больший маркер, легче нажимать) или не использовать intersect: true 

 markers: {
  size: 1,
},
 
 var options = {
  colors: ['#A6295F', '#254AA0'],
  chart: {
    id: 'Chart',
    zoom: {
      enabled: false
    }
  },
  series: [
     {
       name: "Series 1",
        data: [
      50,
      64,
      65,
      55,
      55,
      59,
      58,
      61,
      53,
      64,
      52,
      64,
      70,
      62,
      64,
      54,
      68,
      51,
      59,
      58,
      59,
      53,
      58,
      56,
      55,
      54,
      53,
      60,
      67,
      53,
      53,
      52,
      54,
      54,
      53,
      50,
      60,
      53,
      60,
      70,
      55,
      70,
      70,
      66,
      62,
      60,
      60,
      65,
      56,
      55,
      67,
      52,
      70,
      57,
      58,
      62,
      58,
      68,
       ]
     },
    {
      name: "Series 2",
      data: [
      69,
      59,
      66,
      63,
      66,
      54,
      64,
      52,
      58,
      59,
      53,
      58,
      64,
      67,
      56,
      58,
      62,
      70,
      66,
      64,
      67,
      63,
      69,
      54,
      53,
      62,
      56,
      55,
      51,
      57,
      55,
      55,
      55,
      51,
      63,
      68,
      63,
      56,
      53,
      64,
      61,
      70,
      58,
      51,
      51,
      63,
      57,
      62,
      50,
      67,
      69,
      65,
      68,
      52,
      63,
      66,
      55,
      61,
      ]
    }
  ],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight',
    width: 2,
    colors: ['#A6295F', '#254AA0'],
  },
  grid: {
    borderColor: '#E0E0E0',
    xaxis: {
      lines: {
        show: false
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    }
  },
  tooltip: {
    shared: false,
    intersect: true,
    custom({ series, dataPointIndex, w }) {
      const date = w.config.xaxis.categories[dataPointIndex];

      return `<div class="flex flex-col border-coal-200 rounded-md shadow-md">
              <p class="p-1 bg-coal-100 font-bold">${date}</p>
              </div>`;
    },
  },
  xaxis: {
    type: 'datetime',
    categories: [
  'Jan 01, 2021',
  'Jan 02, 2021',
  'Jan 03, 2021',
  'Jan 04, 2021',
  'Jan 05, 2021',
  'Jan 06, 2021',
  'Jan 07, 2021',
  'Jan 08, 2021',
  'Jan 09, 2021',
  'Jan 10, 2021',
  'Jan 11, 2021',
  'Jan 12, 2021',
  'Jan 13, 2021',
  'Jan 14, 2021',
  'Jan 15, 2021',
  'Jan 16, 2021',
  'Jan 17, 2021',
  'Jan 18, 2021',
  'Jan 19, 2021',
  'Jan 20, 2021',
  'Jan 21, 2021',
  'Jan 22, 2021',
  'Jan 23, 2021',
  'Jan 24, 2021',
  'Jan 25, 2021',
  'Jan 26, 2021',
  'Jan 27, 2021',
  'Jan 28, 2021',
  'Jan 29, 2021',
  'Jan 30, 2021',
  'Jan 31, 2021',
  'Feb 01, 2021',
  'Feb 02, 2021',
  'Feb 03, 2021',
  'Feb 04, 2021',
  'Feb 05, 2021',
  'Feb 06, 2021',
  'Feb 07, 2021',
  'Feb 08, 2021',
  'Feb 09, 2021',
  'Feb 10, 2021',
  'Feb 11, 2021',
  'Feb 12, 2021',
  'Feb 13, 2021',
  'Feb 14, 2021',
  'Feb 15, 2021',
  'Feb 16, 2021',
  'Feb 17, 2021',
  'Feb 18, 2021',
  'Feb 19, 2021',
  'Feb 20, 2021',
  'Feb 21, 2021',
  'Feb 22, 2021',
  'Feb 23, 2021',
  'Feb 24, 2021',
  'Feb 25, 2021',
  'Feb 26, 2021',
  'Feb 27, 2021',
  'Feb 28, 2021'
   ],
    title: {
      text: 'Date'
    },
    labels: {
      format: 'MMM, yyyy',
      showDuplicates: false,
      style: {
        cssClass: 'apexcharts-xaxis-datatime-label'
      }
    },
    tooltip: {
      enabled: false
    }
  },
  yaxis: {
    forceNiceScale: true,
    min: 0,
    title: {
      text: 'USD'
    },
  },
  legend: {
    markers: {
      radius: 2
    }
  },
  markers: {
    size: 1,
    strokeColors: ['#A6295F', '#254AA0'],
    hover: {
      size: 1,
    }
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render(); 
 * {
  font-family: 'Poppins', sans-serif;
}

#chart {
  max-width: 760px;
  margin: 35px auto;
  opacity: 0.9;
}

#timeline-chart .apexcharts-toolbar {
  opacity: 1;
  border: 0;
} 
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

Метки: