如何利用数据库查询返回的JSON数据生成C3图表？

Absolutely! You don’t need to manually reformat your JSON data every time—you can transform it dynamically with JavaScript to fit C3’s expected data structure. Let’s break down how to make this work seamlessly.

First, Understand C3’s Expected Data Structure #

C3 typically expects data in a column-based or row-based format, rather than the object-per-datapoint structure you have. For example, a column-based setup looks like this:

columns: [
  ['x', 1, 2, 3, ...], // X-axis values
  ['Advertencia', 29, 33, 26, ...], // Y-values for the first series
  ['Suspensao', 5, 2, 4, ...] // Y-values for the second series
]

Each series is an array where the first element is the series name, followed by corresponding Y-values aligned with the X-axis order.

Step-by-Step Solution: Transform Raw Data to C3 Format #

Here’s a complete example that takes your raw JSON, transforms it, and renders the C3 chart:

1. HTML Setup (Include D3 and C3) #

C3 depends on D3, so make sure to include both libraries first:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

<div id="chart"></div>

2. JavaScript: Transform Data and Render Chart #

// Your raw JSON data from the database
const rawData = [
  { "serie": "Advertencia", "x": 4, "y": 15 },
  { "serie": "Advertencia", "x": 6, "y": 18 },
  { "serie": "Advertencia", "x": 5, "y": 19 },
  { "serie": "Advertencia", "x": 10, "y": 23 },
  { "serie": "Advertencia", "x": 12, "y": 25 },
  { "serie": "Advertencia", "x": 7, "y": 25 },
  { "serie": "Advertencia", "x": 9, "y": 25 },
  { "serie": "Advertencia", "x": 3, "y": 26 },
  { "serie": "Advertencia", "x": 8, "y": 27 },
  { "serie": "Advertencia", "x": 1, "y": 29 },
  { "serie": "Advertencia", "x": 11, "y": 32 },
  { "serie": "Advertencia", "x": 2, "y": 33 },
  { "serie": "Suspensao", "x": 5, "y": 1 },
  { "serie": "Suspensao", "x": 2, "y": 2 },
  { "serie": "Suspensao", "x": 8, "y": 3 },
  { "serie": "Suspensao", "x": 4, "y": 3 },
  { "serie": "Suspensao", "x": 7, "y": 4 },
  { "serie": "Suspensao", "x": 9, "y": 4 },
  { "serie": "Suspensao", "x": 3, "y": 4 },
  { "serie": "Suspensao", "x": 1, "y": 5 },
  { "serie": "Suspensao", "x": 10, "y": 5 },
  { "serie": "Suspensao", "x": 11, "y": 5 },
  { "serie": "Suspensao", "x": 12, "y": 6 },
  { "serie": "Suspensao", "x": 6, "y": 6 }
];

// Step 1: Extract unique sorted X values
const sortedXValues = [...new Set(rawData.map(item => item.x))].sort((a, b) => a - b);

// Step 2: Group data by series and map Y values to sorted X order
const seriesGroups = {};
rawData.forEach(item => {
  if (!seriesGroups[item.serie]) {
    seriesGroups[item.serie] = {};
  }
  seriesGroups[item.serie][item.x] = item.y;
});

// Step 3: Build C3-compatible columns
const c3Columns = [['x', ...sortedXValues]];
Object.entries(seriesGroups).forEach(([serieName, xToYMap]) => {
  const yValues = sortedXValues.map(x => xToYMap[x] || null); // Handle missing values if any
  c3Columns.push([serieName, ...yValues]);
});

// Step 4: Initialize C3 chart
const chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: c3Columns,
    type: 'line' // Adjust to your desired chart type (bar, scatter, etc.)
  },
  axis: {
    x: {
      label: 'X Values',
      type: 'category' // Use if X is categorical; omit if numerical
    },
    y: {
      label: 'Y Values'
    }
  }
});

How This Works #

• Extract Sorted X Values: We first get all unique X values from your raw data and sort them to ensure consistent axis order.
• Group by Series: We organize each datapoint under its series name, mapping X values to their corresponding Y values.
• Build C3 Columns: We construct the column array that C3 expects, aligning each series’ Y values with the sorted X axis.
• Render the Chart: Finally, we pass the transformed data to c3.generate() to create your chart.

This approach lets you use your raw database query output directly—no manual JSON reformatting required! You can adjust the type property (e.g., bar, scatter) to match your desired chart type.

内容的提问来源于stack exchange，提问作者Jeterson Miranda Gomes