Cookie Consent by Free Privacy Policy Generator 📌 VChart, How to monitor the change of DataZoom?


✅ VChart, How to monitor the change of DataZoom?


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Title

How to monitor the change of DataZoom?

Description

It is necessary to obtain the state information of the user's interaction with the chart dataZoom for the next rendering to preserve the state of dataZoom.

Solution

Different chart libraries have different solutions. VChart provides the dataZoomChange event to obtain the new start and end points of the chart after the DataZoom change, as well as other information.
After obtaining the new start and end, users can save this information and rewrite it back to the spec when needed, thus making the dataZoom state persistent.

Code Example

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

import VChart from "@visactor/vchart";

const App = () => {
  useEffect(() => {
    const spec = {
      type: "scatter",
      xField: "revenues_mm",
      yField: "profit_mm",
      seriesField: "category",
      dataZoom: [
        {
          orient: "bottom",
          start: 0,
          end: 0.4,
          minSpan: 0.2,
          maxSpan: 0.8,
          filterMode: "axis",
        },
      ],
      axes: [
        {
          title: {
            visible: true,
            text: "revenues_mm",
          },
          orient: "left",
          type: "linear",
        },
        {
          title: {
            visible: true,
            text: "profit_mm",
          },
          orient: "bottom",
          label: { visible: true },
          type: "linear",
        },
      ],
      legends: [{}],
      data: [
        {
          id: "data",
          values: [
            {
              company: "Johnson & Johnson",
              revenues_mm: 71890,
              profit_mm: 18540,
              profit_as_of_revenues: 0.2578940047294478,
              category: "Pharmaceuticals",
            },
            {
              company: "Procter & Gamble",
              revenues_mm: 71726,
              profit_mm: 10508,
              profit_as_of_revenues: 0.14650196581434904,
              category: "Household & Personal Products",
            },
            {
              company: "Abbvie",
              revenues_mm: 25638,
              profit_mm: 5953,
              profit_as_of_revenues: 0.23219439893907481,
              category: "Pharmaceuticals",
            },
            {
              company: "Amgen",
              revenues_mm: 22991,
              profit_mm: 7722,
              profit_as_of_revenues: 0.33587055804445215,
              category: "Pharmaceuticals",
            },
            {
              company: "Eli Lilly",
              revenues_mm: 21222,
              profit_mm: 2738,
              profit_as_of_revenues: 0.12901705777023842,
              category: "Pharmaceuticals",
            },
            {
              company: "Bristol-Myers Squibb",
              revenues_mm: 19427,
              profit_mm: 4457,
              profit_as_of_revenues: 0.22942296803417925,
              category: "Pharmaceuticals",
            },
            {
              company: "Altria Group",
              revenues_mm: 19337,
              profit_mm: 14239,
              profit_as_of_revenues: 0.7363603454517247,
              category: "Tobacco",
            },
            {
              company: "Kimberly-Clark",
              revenues_mm: 18202,
              profit_mm: 2166,
              profit_as_of_revenues: 0.11899791231732777,
              category: "Household & Personal Products",
            },
            {
              company: "General Mills",
              revenues_mm: 16563,
              profit_mm: 1697,
              profit_as_of_revenues: 0.10245728430839823,
              category: "Food",
            },
            {
              company: "Colgate-Palmolive",
              revenues_mm: 15195,
              profit_mm: 2441,
              profit_as_of_revenues: 0.16064494899638038,
              category: "Household & Personal Products",
            },
            {
              company: "Conagra Brands",
              revenues_mm: 14134,
              profit_mm: -677,
              profit_as_of_revenues: -0.04789868402433847,
              category: "Food",
            },
            {
              company: "Land O'Lakes",
              revenues_mm: 13233,
              profit_mm: 245,
              profit_as_of_revenues: 0.01851432025995617,
              category: "Food",
            },
            {
              company: "Pepsico",
              revenues_mm: 62789,
              profit_mm: 6329,
              profit_as_of_revenues: 0.1007979104620236,
              category: "Food",
            },
            {
              company: "Kellogg",
              revenues_mm: 13014,
              profit_mm: 694,
              profit_as_of_revenues: 0.053327186107269095,
              category: "Food",
            },
            {
              company: "Reynolds American",
              revenues_mm: 12503,
              profit_mm: 6073,
              profit_as_of_revenues: 0.48572342637766935,
              category: "Tobacco",
            },
            {
              company: "Biogen",
              revenues_mm: 11449,
              profit_mm: 3703,
              profit_as_of_revenues: 0.32343436107957024,
              category: "Pharmaceuticals",
            },
            {
              company: "Estee Lauder",
              revenues_mm: 11262,
              profit_mm: 1115,
              profit_as_of_revenues: 0.09900550523885633,
              category: "Household & Personal Products",
            },
            {
              company: "Celgene",
              revenues_mm: 11229,
              profit_mm: 1999,
              profit_as_of_revenues: 0.17802119511977915,
              category: "Pharmaceuticals",
            },
            {
              company: "Hormel Foods",
              revenues_mm: 9523,
              profit_mm: 890,
              profit_as_of_revenues: 0.09345794392523364,
              category: "Food",
            },
            {
              company: "Campbell Soup",
              revenues_mm: 7961,
              profit_mm: 563,
              profit_as_of_revenues: 0.07071975882426831,
              category: "Food",
            },
            {
              company: "J. M. Smucker",
              revenues_mm: 7811,
              profit_mm: 689,
              profit_as_of_revenues: 0.08820893611573422,
              category: "Food",
            },
            {
              company: "Dean Foods",
              revenues_mm: 7710,
              profit_mm: 120,
              profit_as_of_revenues: 0.01556420233463035,
              category: "Food",
            },
            {
              company: "Hershey",
              revenues_mm: 7440,
              profit_mm: 720,
              profit_as_of_revenues: 0.0967741935483871,
              category: "Food",
            },
            {
              company: "Pfizer",
              revenues_mm: 52824,
              profit_mm: 7215,
              profit_as_of_revenues: 0.13658564288959563,
              category: "Pharmaceuticals",
            },
            {
              company: "Constellation Brands",
              revenues_mm: 6548,
              profit_mm: 1055,
              profit_as_of_revenues: 0.16111789859499084,
              category: "Beverages",
            },
            {
              company: "Dr. Pepper Snapple Group",
              revenues_mm: 6440,
              profit_mm: 847,
              profit_as_of_revenues: 0.13152173913043477,
              category: "Beverages",
            },
            {
              company: "HRG Group",
              revenues_mm: 6403,
              profit_mm: -199,
              profit_as_of_revenues: -0.031079181633609246,
              category: "Household & Personal Products",
            },
            {
              company: "Treehouse Foods",
              revenues_mm: 6175,
              profit_mm: -229,
              profit_as_of_revenues: -0.03708502024291498,
              category: "Food",
            },
            {
              company: "Avon Products",
              revenues_mm: 5853,
              profit_mm: -108,
              profit_as_of_revenues: -0.018452075858534086,
              category: "Household & Personal Products",
            },
            {
              company: "Clorox",
              revenues_mm: 5761,
              profit_mm: 648,
              profit_as_of_revenues: 0.11248047214025343,
              category: "Household & Personal Products",
            },
            {
              company: "Coca-Cola",
              revenues_mm: 41863,
              profit_mm: 6527,
              profit_as_of_revenues: 0.15591333635907603,
              category: "Beverages",
            },
            {
              company: "Merck",
              revenues_mm: 39807,
              profit_mm: 3920,
              profit_as_of_revenues: 0.09847514256286583,
              category: "Pharmaceuticals",
            },
            {
              company: "Gilead Sciences",
              revenues_mm: 30390,
              profit_mm: 13501,
              profit_as_of_revenues: 0.4442579795985522,
              category: "Pharmaceuticals",
            },
            {
              company: "Philip Morris International",
              revenues_mm: 26685,
              profit_mm: 6967,
              profit_as_of_revenues: 0.2610830054337643,
              category: "Tobacco",
            },
            {
              company: "Kraft Heinz",
              revenues_mm: 26487,
              profit_mm: 3632,
              profit_as_of_revenues: 0.1371238720881942,
              category: "Food",
            },
            {
              company: "Mondelez International",
              revenues_mm: 25923,
              profit_mm: 1659,
              profit_as_of_revenues: 0.06399722254368707,
              category: "Food",
            },
          ],
        },
      ],
    };
    const vchart = new VChart(spec, { dom: "chart" });
    vchart.renderSync();

    vchart.on("dataZoomChange", (params) => {
      const { value } = params;
      console.log("changed value:", value.start, value.end);
    });

    return () => {
      vchart.release();
    };
  }, []);

  return <div id="chart"></div>;
};

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Result

Online Demo: https://codesandbox.io/p/sandbox/vchart-datazoom-event-kczn5h?file=%2Fsrc%2Findex.js%3A1%2C1-327%2C1

Related Documentation

DataZoom Event API: https://visactor.io/vchart/api/API/event
Github: https://github.com/VisActor/VChart

...

✅ VChart, How to monitor the change of DataZoom?


📈 73.51 Punkte

✅ How to configure gradual change colors for discrete data in VChart?


📈 28.3 Punkte

✅ How to clear the box selection at the end of the onbrushEnd event when using vchart?


📈 20.89 Punkte

✅ Can we limit the default rendered lines in a vchart multi-line chart?


📈 20.89 Punkte

✅ How to set a default selected effect for VChart pie charts?


📈 20.89 Punkte

✅ How to format axis labels in @visactor/vchart?


📈 20.89 Punkte

✅ Does VChart's multi-group bar chart support multi-layer axis labels?


📈 20.89 Punkte

✅ In vchart, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?


📈 20.89 Punkte

✅ Can the VChart axis be set to avoid decimals?


📈 20.89 Punkte

✅ How to align bar chart labels to the left and keep their styles consistent in @visactor/vchart?


📈 20.89 Punkte

✅ How to set the bar width of a bar chart in VChart


📈 20.89 Punkte

✅ How to implement hover effect on points in vchart chart library?


📈 20.89 Punkte

✅ How to customize the labels of a pie chart in VChart?


📈 20.89 Punkte

✅ How to configure nested pie charts in VChart


📈 20.89 Punkte

✅ How to customize the shape of the legend in VChart?


📈 20.89 Punkte

✅ How to bind the click event of the pie chart label in @visactor/vchart?


📈 20.89 Punkte

✅ How to configure a correlation scatter plot in VChart


📈 20.89 Punkte

✅ How to configure custom themes in VChart?


📈 20.89 Punkte

✅ Issues with x-axis data overlap and y-axis data not being displayed when using vchart library


📈 20.89 Punkte

✅ How to configure different colors for a line in VChart


📈 20.89 Punkte

✅ How to use the tooltip and abscissa in the vchart library?


📈 20.89 Punkte

✅ VChart, How to perform event tracking based on Tooltip behavior


📈 20.89 Punkte

✅ How to obtain the relative position of brush in the coordinate system in the vchart chart library?


📈 20.89 Punkte

✅ How VChart line charts support emphasizing a certain point


📈 20.89 Punkte

✅ How to add custom content at the bottom of the tooltip card in VChart?


📈 20.89 Punkte

✅ VChart, How to center the label of a bar chart?


📈 20.89 Punkte

✅ What are the methods for data sampling in VChart charts?


📈 20.89 Punkte

✅ How to configure vchart line chart to make the points sparse in the case of big data?


📈 20.89 Punkte

✅ How to achieve the linkage effect in the vchart library?


📈 20.89 Punkte

✅ How to customize radar chart axis labels to richtext in VChart?


📈 20.89 Punkte

✅ How to configure the Y-axis with both title and unit in the VChart line chart?


📈 20.89 Punkte

✅ How to set VChart axis gridlines as dashed lines?


📈 20.89 Punkte

✅ How to make the axis label with graphics in VChart?


📈 20.89 Punkte











matomo

Datei nicht gefunden!