为Morris Chart条形图添加横向滚动条的可行方案问询

Alright, let's figure out how to fix that wonky Morris Bar Chart display when dealing with large datasets—since you don't want to swap out the component you've put so much work into, here are actionable workarounds that get the job done:

This is the quickest fix if you just need users to be able to view all data by scrolling. Morris doesn't have built-in scroll, but we can use CSS to add it via a parent container:

1. HTML Structure: Wrap your Morris chart div in a container with fixed dimensions:

   <div class="morris-scroll-container">
     <div id="large-bar-chart"></div>
   </div>
   

2. CSS Styling: Set overflow properties on the container to enable scrolling:

   .morris-scroll-container {
     width: 100%;
     max-height: 600px; /* Adjust based on your layout */
     overflow-y: auto; /* Vertical scroll for tall charts */
     overflow-x: auto; /* Horizontal scroll for wide datasets */
     border: 1px solid #eee; /* Optional: visual boundary */
   }
   

3. Adjust Morris Config: Make sure the chart itself is large enough to trigger scrolling. Add explicit width/height in your Morris initialization:

   Morris.Bar({
     element: 'large-bar-chart',
     data: yourLargeDataset,
     width: 1500, /* Set based on number of data points */
     height: 700,
     // Your other config options (xkey, ykeys, labels, etc.)
   });
   

If performance is an issue (rendering hundreds of bars can lag), split your data into chunks and add pagination controls to switch between segments:

1. Set Up Pagination Controls: Add simple buttons to your HTML:

   <div class="pagination-controls">
     <button id="prev-page">Previous</button>
     <span id="page-info">Page 1 of X</span>
     <button id="next-page">Next</button>
   </div>
   <div id="paginated-bar-chart"></div>
   

2. JavaScript Logic: Handle pagination and re-render the chart for each page:

   const allData = yourHugeDataset;
   const pageSize = 25; // Number of bars per page
   let currentPage = 1;
   const totalPages = Math.ceil(allData.length / pageSize);
   
   // Function to render chart for a given page
   function renderPage(page) {
     const startIdx = (page - 1) * pageSize;
     const pageData = allData.slice(startIdx, startIdx + pageSize);
     
     // Destroy existing chart first to avoid duplicates
     if (window.morrisChartInstance) {
       window.morrisChartInstance.destroy();
     }
   
     // Initialize new chart with page data
     window.morrisChartInstance = Morris.Bar({
       element: 'paginated-bar-chart',
       data: pageData,
       // Your other config options
     });
   
     // Update page info
     document.getElementById('page-info').textContent = `Page ${page} of ${totalPages}`;
   }
   
   // Attach click handlers to pagination buttons
   document.getElementById('prev-page').addEventListener('click', () => {
     if (currentPage > 1) {
       currentPage--;
       renderPage(currentPage);
     }
   });
   
   document.getElementById('next-page').addEventListener('click', () => {
     if (currentPage < totalPages) {
       currentPage++;
       renderPage(currentPage);
     }
   });
   
   // Render first page on load
   renderPage(currentPage);
   

For a more interactive experience, add zoom controls to let users adjust how many bars fit in the viewport. This works by modifying the barSizeRatio in Morris config:

1. Add Zoom Slider:

   <div class="zoom-control">
     <label>Zoom: </label>
     <input type="range" id="zoom-slider" min="0.1" max="2" step="0.1" value="1">
   </div>
   <div id="zoomable-bar-chart"></div>
   

2. JavaScript for Zoom:

   let chartInstance = Morris.Bar({
     element: 'zoomable-bar-chart',
     data: yourLargeDataset,
     barSizeRatio: 0.5, // Initial ratio
     // Your other config options
   });
   
   document.getElementById('zoom-slider').addEventListener('input', (e) => {
     const zoomLevel = parseFloat(e.target.value);
     // Update bar size ratio and re-render
     chartInstance.options.barSizeRatio = 0.5 * zoomLevel;
     chartInstance.redraw();
   });
   

All these methods let you stick with Morris Chart while fixing the large dataset display issue. The scrollable container is best for quick implementation, pagination is better for performance, and zoom controls add a nice interactive touch.

内容的提问来源于stack exchange，提问作者Huzaifa Tariq