Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

add native range charts

Offen
  • Stimmt etwas nicht?
#7,288 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
data-visualization

Rechercherichtung

Es sind keine Quelldateien, Tests oder Einstiegspunkte angegeben. Beginne mit dem benutzerdefinierten range-chart-Beispiel des Issues und vergleiche sein Verhalten mit den aufgeführten scatter-, overlaid-bar- und stacked-bar-Ansätzen; als abgeschlossen gilt die Aufgabe, wenn Plotly.js native range-chart-Unterstützung bietet, die Basen ungleich null und negative Basen korrekt verarbeitet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

feature P3

MinutePhysics called us out (by name!) for not having native support for range charts: https://www.youtube.com/watch?v=5zBg9pH_6bE

However, to be clear, it is possible to build this chart type in Plotly using the base attribute for bar charts and doing a bit of data preparation.

Here's a live demo of a custom range chart and our built-ins: https://codepen.io/ndrezn/pen/XJrWboB

Code snippet 
/**
 * Creates a range bar chart using Plotly.js.
 *
 * @param {Object} data - The dataset, with keys as categories (e.g., cities) and values as arrays of measurements.
 * @param {Array} labels - The labels for each measurement (e.g., temperature metrics).
 * @param {string} containerId - The ID of the HTML container to render the chart.
 * @param {string} title - The title of the chart.
 */
function rangeChart(data, labels, containerId, title) {
  const categories = Object.keys(data); // Extract categories (e.g., cities)

  // Generate bar traces for each label
  const barTraces = labels.map((label, index) => {
    const bases = categories.map((category) =>
      index === 0 ? data[category][index] : data[category][index - 1]
    ); // base, i.e. the previous value
    const heights = categories.map(
      (category) => data[category][index] - bases[categories.indexOf(category)]
    ); // Height relative to the base, i.e. the current value
    return {
      x: categories,
      y: heights, // Bar heights
      base: bases, // Starting points for each bar
      name: label,
      type: "bar"
    };
  });

  // Layout for the chart
  const layout = {
    title: title,
    barmode: "overlay", // Overlapping bars to show ranges
    xaxis: { title: "Category" },
    yaxis: { title: "Value" }
  };

  // Render the chart
  Plotly.newPlot(containerId, barTraces, layout);
}

const ranges = {
  Ontario: [-9, 3, 8, 13, 27],
  England: [3, 8, 12, 16, 24],
  Kentucky: [-3, 8, 14, 20, 30]
};

const labels = [
  "Winter mean low",
  "Annual mean low",
  "Annual mean",
  "Annual mean high",
  "Summer mean high"
];

rangeChart(
  ranges,
  labels,
  "rangePlot",
  "Temperature Ranges in Three Londons (range)"
);

Image

That being said, having this chart-type built in would be great. The mental gymnastics are a bit tricky to get a true range chart working correctly.

Here are the built-in ways to achieve a similar chart:

Code snippet 
// Data for the three Londons
const ranges = {
  Ontario: [-9, 3, 8, 13, 27],
  England: [3, 8, 12, 16, 24],
  Kentucky: [-3, 8, 14, 20, 30]
};

const labels = [
  "Winter mean low",
  "Annual mean low",
  "Annual mean",
  "Annual mean high",
  "Summer mean high"
];
const cities = Object.keys(ranges);

// Scatter plot traces
const scatterTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  mode: "markers",
  name: label,
  type: "scatter"
}));

const scatterLayout = {
  title: "Temperature Ranges in Three Londons (scatter)",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("scatterPlot", scatterTraces, scatterLayout);

// Bar plot traces
const barTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  name: label,
  type: "bar"
}));

const barLayout = {
  title: "Temperature Ranges in Three Londons (overlay)",
  barmode: "overlay",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("barPlot", barTraces, barLayout);

// Bar plot traces
const stackedBarTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  name: label,
  type: "bar"
}));

const stackedBarLayout = {
  title: "Temperature Ranges in Three Londons (stacked)",
  barmode: "stack",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("stackedBarPlot", stackedBarTraces, stackedBarLayout);

However, these aren't quite right.

  • The scatter plot is most legible, but doesn't depict a range
  • The overlaid bar shows the right data, but because the base of all positive points is 0, they actually overlap on top of each other. We want the base to he previous, and for England, we want the base to be 3, not 0.
  • The stacked bar chart looks right at first glance, but it's actually summing all the temperatures (and of course, the base for England is at 0, not 3. And the negative values stack a bit weirdly.

Image

Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
21

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/plotly.js

Alle Issues in plotly/plotly.js

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.