Jqplot动态图表拆分：将12值图表拆分为3个4值子图表

Got it, let's break down how to split your original stacked chart into the subcharts you need. Your original data has 4 series each with 12 values (3 sets of 4 points), so we'll split each series into chunks and create separate charts for each chunk.

Step 1: Split Data Arrays into Chunks #

First, let's write a simple helper function to split each 12-element array into 3 chunks of 4 elements each. This keeps the code clean and reusable:

function splitArrayIntoChunks(arr, chunkSize) {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
}

Apply this function to your original series:

$(document).ready(function(){ 
  var s1 = [2, 6, 7, 10, 2, 6, 7, 10, 2, 6, 7, 10]; 
  var s2 = [7, 5, 3, 2, 7, 5, 3, 2, 7, 5, 3, 2]; 
  var s3 = [14, 9, 3, 8, 14, 9, 3, 8, 14, 9, 3, 8]; 
  var s4 = [15, 8, 2, 10, 15, 8, 2, 10, 15, 8, 2, 10];

  // Split each series into 3 chunks of 4 points
  const s1Chunks = splitArrayIntoChunks(s1, 4);
  const s2Chunks = splitArrayIntoChunks(s2, 4);
  const s3Chunks = splitArrayIntoChunks(s3, 4);
  const s4Chunks = splitArrayIntoChunks(s4, 4);

Step 2: Add Chart Containers #

You'll need a separate <div> for each subchart. If you want 3 stacked subcharts (each showing 4 points from all 4 series), add these to your HTML:

<div id="chart-1" style="height:300px; width:500px; margin:20px;"></div>
<div id="chart-2" style="height:300px; width:500px; margin:20px;"></div>
<div id="chart-3" style="height:300px; width:500px; margin:20px;"></div>

If you meant 4 groups (one per series) each with 3 subcharts, add 12 containers (e.g., chart-s1-1, chart-s1-2, chart-s2-1, etc.).

Step 3: Initialize Each Subchart #

Option 1: Stacked Subcharts (3 Total) #

Each subchart will show a 4-point chunk from all 4 series, maintaining the stacked layout:

// First subchart (uses first chunk of each series)
  $.jqplot('chart-1', [s1Chunks[0], s2Chunks[0], s3Chunks[0], s4Chunks[0]], {
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer, // Match your original renderer
      rendererOptions: { barMargin: 20 }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ['Point 1', 'Point 2', 'Point 3', 'Point 4']
      },
      yaxis: { label: 'Value' }
    },
    legend: { show: true, location: 'e' }
  });

  // Second subchart
  $.jqplot('chart-2', [s1Chunks[1], s2Chunks[1], s3Chunks[1], s4Chunks[1]], {
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: { barMargin: 20 }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ['Point 5', 'Point 6', 'Point 7', 'Point 8']
      },
      yaxis: { label: 'Value' }
    },
    legend: { show: true, location: 'e' }
  });

  // Third subchart
  $.jqplot('chart-3', [s1Chunks[2], s2Chunks[2], s3Chunks[2], s4Chunks[2]], {
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: { barMargin: 20 }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ['Point 9', 'Point 10', 'Point 11', 'Point 12']
      },
      yaxis: { label: 'Value' }
    },
    legend: { show: true, location: 'e' }
  });
});

Option 2: 4 Groups (One Per Series) with 3 Subcharts Each #

If you want separate groups for each series (each split into 3 subcharts of 4 points), initialize them like this (example for series s1):

// s1 first chunk subchart
$.jqplot('chart-s1-1', [s1Chunks[0]], {
  seriesDefaults: { renderer: $.jqplot.LineRenderer },
  axes: { xaxis: { ticks: ['1', '2', '3', '4'] } }
});

// Repeat for s1Chunks[1], s1Chunks[2], then duplicate for s2, s3, s4

Key Reminders #

• Ensure you include all required jqplot dependencies (jQuery, jqplot core, and any renderers like jqplot.barRenderer.min.js).
• Adjust renderer options, ticks, styling, and legend settings to match your original chart's configuration.
• The splitArrayIntoChunks function works for any array size, so it's easy to adapt if your data changes later.

内容的提问来源于stack exchange，提问作者Cananau Cristian