如何基于指定JSON数据在Highcharts中创建多折线图

Got it, let's tackle this Highcharts line chart problem with your JSON data. Here's a practical, step-by-step solution that should fit your needs:

Since you didn’t share the exact JSON format, I’ll use a common structure that matches your description (adjust if yours differs):

[
  { "date": "2024-01-01", "Y": 12, "Z": 18 },
  { "date": "2024-01-02", "Y": 15, "Z": 22 },
  { "date": "2024-01-03", "Y": 9, "Z": 16 },
  { "date": "2024-01-04", "Y": 18, "Z": 25 }
]

Highcharts works best with arrays of values, so we’ll extract the date (X-axis) and Y/Z values into separate arrays:

// Replace this with your actual JSON data
const rawData = [
  { "date": "2024-01-01", "Y": 12, "Z": 18 },
  { "date": "2024-01-02", "Y": 15, "Z": 22 },
  { "date": "2024-01-03", "Y": 9, "Z": 16 },
  { "date": "2024-01-04", "Y": 18, "Z": 25 }
];

// Convert date strings to timestamps (Highcharts prefers this for datetime axes)
const xAxisDates = rawData.map(item => new Date(item.date).getTime());

// Extract Y and Z values into separate series arrays
const ySeries = rawData.map(item => item.Y);
const zSeries = rawData.map(item => item.Z);

Now we’ll set up the chart to use our prepared data, with dates on the X-axis and Y/Z as two separate line series:

Highcharts.chart('chart-container', {
  title: {
    text: 'Y & Z Values Over Time'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: 'Date'
    },
    labels: {
      format: '{value:%Y-%m-%d}' // Customize date display format
    }
  },
  yAxis: {
    title: {
      text: 'Metric Values'
    }
  },
  series: [
    {
      name: 'Y Value',
      data: ySeries,
      type: 'line',
      color: '#2f7ed8' // Optional: Customize line color
    },
    {
      name: 'Z Value',
      data: zSeries,
      type: 'line',
      color: '#0d233a' // Optional: Customize line color
    }
  ],
  tooltip: {
    formatter: function() {
      return `<b>${this.series.name}</b><br/>${Highcharts.dateFormat('%Y-%m-%d', this.x)}: ${this.y}`;
    }
  }
});

• If your JSON has a different structure (e.g., nested objects like { x: "2024-01-01", values: { y: 12, z: 18 } }), just tweak the mapping logic (e.g., item => new Date(item.x).getTime() or item => item.values.y).
• To make the X-axis dates display more neatly (e.g., for longer date ranges), you can add tickInterval: 24 * 3600 * 1000 to the X-axis config to show one tick per day.
• For tooltips, you can modify the formatter to include more details if needed.

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