search

VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
1.01k stars 72 forks source link

[Bug] error when set background image of vchart #3403

Closed xile611 closed 1 week ago

xile611 commented 1 week ago

Version

no

Link to Minimal Reproduction

no need

Steps to Reproduce

const spec = {
  type: "area",
  data: {
    values: [
      { type: "Nail polish", country: "Africa", value: 4229 },
      { type: "Nail polish", country: "EU", value: 4376 },
      { type: "Nail polish", country: "China", value: 3054 },
      { type: "Nail polish", country: "USA", value: 12814 },
      { type: "Eyebrow pencil", country: "Africa", value: 3932 },
      { type: "Eyebrow pencil", country: "EU", value: 3987 },
      { type: "Eyebrow pencil", country: "China", value: 5067 },
      { type: "Eyebrow pencil", country: "USA", value: 13012 },
      { type: "Rouge", country: "Africa", value: 5221 },
      { type: "Rouge", country: "EU", value: 3574 },
      { type: "Rouge", country: "China", value: 7004 },
      { type: "Rouge", country: "USA", value: 11624 },
      { type: "Lipstick", country: "Africa", value: 9256 },
      { type: "Lipstick", country: "EU", value: 4376 },
      { type: "Lipstick", country: "China", value: 9054 },
      { type: "Lipstick", country: "USA", value: 8814 },
      { type: "Eyeshadows", country: "Africa", value: 3308 },
      { type: "Eyeshadows", country: "EU", value: 4572 },
      { type: "Eyeshadows", country: "China", value: 12043 },
      { type: "Eyeshadows", country: "USA", value: 12998 },
      { type: "Eyeliner", country: "Africa", value: 5432 },
      { type: "Eyeliner", country: "EU", value: 3417 },
      { type: "Eyeliner", country: "China", value: 15067 },
      { type: "Eyeliner", country: "USA", value: 12321 },
      { type: "Foundation", country: "Africa", value: 13701 },
      { type: "Foundation", country: "EU", value: 5231 },
      { type: "Foundation", country: "China", value: 10119 },
      { type: "Foundation", country: "USA", value: 10342 },
      { type: "Lip gloss", country: "Africa", value: 4008 },
      { type: "Lip gloss", country: "EU", value: 4572 },
      { type: "Lip gloss", country: "China", value: 12043 },
      { type: "Lip gloss", country: "USA", value: 22998 },
      { type: "Mascara", country: "Africa", value: 18712 },
      { type: "Mascara", country: "EU", value: 6134 },
      { type: "Mascara", country: "China", value: 10419 },
      { type: "Mascara", country: "USA", value: 11261 },
    ],
  },
  area: {
    visible: true,
  },
  color: {
    type: "ordinal",
    domain: [],
    range: [
      "#6690F2",
      "#70D6A3",
      "#B4E6E2",
      "#63B5FC",
      "#FF8F62",
      "#FFDC83",
      "#BCC5FD",
      "#A29BFE",
      "#63C4C7",
      "#F68484",
    ],
  },
  title: {
    visible: true,
    text: "Stacked line chart",
  },
  stack: true,
  xField: "type",
  yField: "value",
  seriesField: "country",
  legends: [{ visible: true, position: "middle", orient: "bottom" }],
  background: {
    image:
      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJcAoAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAIDBQYBB//EAEMQAAIBAwICBgcFBQUJAQAAAAECAwAEEQUhEjETIkFRYXEGFDKBkaHRFSNCscEHYoKS8HKywuHxJDREUlNUZIPSFv/EABoBAAMBAQEBAAAAAAAAAAAAAAECAwQABQb/xAApEQACAgEEAgEDBAMAAAAAAAAAAQIDEQQSMVEhQWETFCJCUnGBIzIz/9oADAMBAAIRAxEAPwBvM5O576WK5ipI43lbhReI19PnB4BxUZjhRkmj4bQW4El0cN+FO+nRFbFefHKRjbcChZC0rlnO/dU22xlhE0947k8Gy8sd1DK+OfOnCPeniKuWEd5YzizT1NPWHNSBcbUThgOadjwzUyrkVNDAuOJmwPzoZHSBQB2jFSKFotYo23C4rhhXNLvQdpGiA8qLijwKYiKu9TKRjq86jKRWKEyAjcZqExDOwxRIJ7akVh21JzwWUcgwiIG1dW1LHJo4MiruM1wYJyFwKm7GUUEQxw8NSdHtUvU/HypjTIBgDIpG2xkkih+xSF4mbbz5ULM/Q/dxKV8R21eyTqQQ0jEeFDrDA5JZGYeeK1RulzIxyqXCKIpg5IOe81wDBq+NrEdgGx3cVdGmRSfhb41VXom6GUg5U8Nird9HHDsCB40FJp8iNtyp1ZCQjrnEgD08PXWs5FGT8+dPityDvTNoCUiSIk8hmiF5dZdqkiiKAEcu3fsouMwoMuMnsyKzztwaIwyCIsrHEYxmpHsJc5POpfXFRjwqv8O9d9f8Me6ouU+cFVGHtkPq7r7XKpYwBsaZLcvMM4YjxG1QesODgDFDLfIcpcBw4ezmaSonFwl0Lc8cWTVczsx2ALeNMhswWyI+JuLi423OfOkkn2MpfBbytFHuMZ8Kh9aQIXzjG+aEk0+4uBmKR0cN7QUHPmDQx0m4ku1OpSRyxQlXjigBHG/PjYb8tuEZxnc7gYm5RXsqlJ+i0MhYDfYDHnTXTIzTt02Kn3CpUjV/aBUeNI5DKOQSZOA9RcjvGKg4mU54CfOgRxjkSPKnrJMm4JPmK2qvC5PPd2XwGdI55RkeVdQ3THCo1RJf3CcuH+UURHqcg9oKfdQamuEhlOD5bJRY3UoyzsBXDpso9pww+dN+1JPwhQffXG1GZhglRS/5v4G3U/LHvahE9jiPduahQrHkrb5Pbls0xpnkPWJI+VNzVUnj8mScln8USyXMjDgRFjXuU1EsAIyxz28jUi1IGAG9Ddjg7nkbFA7HKsFHLJolLaJNndmPcKiErDlyronbNSk5MvDagkQoeWceL09bOM7scD40Ms7VIJm78VnluLxcQuO1s1OT1j3cNFxiJR92nD44qtWc9pzXenPYcVnkpPll1KPpBjjJxjP8WaaIcdbhA86FMznk3zqJ3dtmbbzpMNB3IOZIxzxnwpoEYIIGT+VAhsH26bf+sTafPBZyrBcTIY0nYZ6PP4gO8cx40kpNDLyDNaog9sk9xFNMA7KLO4rgWtqv7ZgdPSBBBThb5/1owJTglN9yD7cC9WPYM++nC1Y9mKM6OnCOl+6O+2BPVWApvq7CrAJS4KH3bG+2QB0JHOkIqP6LJpwhpHq4+xlppegER04JRvQU4W9Tlq4lFppAPDTuCjTbUvVqk9ZHsotNIB4N6cI89uKOFseyuGDhZQ7KCxwoPae4VKWrj2UWnkCLD+9Txbxnm2TRBgGSc5350uiI5VCWrXZWNHwQrbR9lSrbqK70Z7Til0f72azT1fyXjR8FSLle7Fd9aWvPk1P0xCjNhYnvww5/z137W9Lwd9Osj/7B/wDVen9OXRDfWehC6WnC5WvP11j0pHPS7MnuEw+tFWmua886Jc6RFHGfakW5Bx7qV1T6GU6uzci5WnC5TtrMfaV5gcMI27Aw+tc+1L4f8OD5sPrSOiwP1KjVC5i7wPOnC4jPIg+VZP7VvxytlH8Q+tL7X1H/AKC/zD60j09g6tpNes6dtSC4iHaB51jRq2pHlAPcw+tdOp6owwISPIr9ai9Jcx1bQbL1qL/mHup6zRncHNYxdQ1Q84j78fWpVvtT5CJcnkNvrUp6S0dW0mxEq0unUHYgHxrJpqWoN1VhjYjmA4yPnUgv9R/FagjwYfWoPSXlFOns0svRTHMi9bvDFW9xG4oPTLSKxDvJcS3l02z3U/tsv4V8MDHLmRk7k1UjUL3tsz7nX60vtC6/FZvjwdfrU3RqEsDJU9mjM600zrWbbUpwP9zl9zL9aiOpz/8AaSjzZfrUXp7+iq+j+5GmNwtNNyorMHUZyf8AdpPiPrTGv5jzt5B8KR0W9Fowqf6kTCD91a6Lf91alDYrvHX1O2fZ87vh0MFv+6vwp6247VX+WnB6cJKDjPsO+HQhbjsVfhTxB+6tcEtPEtI4T7GVkOhk8TR28siKvEiFl8wKpvQ7U59f0OK/uo4Vld2DCNSF2OBzJq+aUGNw3IqRzrE/smvY/wD86bQt99HM7cOD7Jxv8cj3VNwnt5KRnHOcG6jt+LbCj+GpRaHsx7gKZHNg0Qk9QlVb2UV9fSG+qN/WKZewvBYXMy+1HC7L5hSaKW4HbUepzKdKvR/48n901F1W9jq6Ho869BLP7ZudUk1B5ZZFS34XZzxBirAtnvOATR3oxca/e2NxPaSRSC3upLd4J988OOR9/f2Vz9luFbVcHBxB/dei/wBlwEelakS2Q2oyY59gAJ99VnvSePgO6DfkLi9KxbTCDWbCW2k5bjIPiB2+6ruz1Kwvl/2WaJz2LjB+FFzx2t1CYrmJJYz+F1BHzrKa76G2728s2ivJb3KoWjizxBjjkDnb3k1BQjP/AGTiNvS4NIzwNJ0fSQM45qGBIpG2GMCPI7xXiNgqWTmK/sreS8QnpI5166tnt7+XYattE9JE1vWYbObS4eO6Yp06TyGWPY7huLO2M+6hZoppZjNjK1e4o9PK25naAFelVQxj4skA8j76aYFHJAfPNUvo56HWmi3TXc93Nd3jc5Xyo8cgE5ye8/lWoyOQx415926MsQbaNUJRxwZ1rlSKj6dc1W8Utd+8POvuFUkfJOyTLHpx2U4T0AkbvsKIS0lbag4xQVKT4QSJ6d0/ecePdUPqU2NqXqcw50uIdjfn0V176VWVhdXMN2JI/V+HibGc5Axy86yf7Or2Oze8dmIjKkJhcluvtt/WPCovSa3a817UbUZ4mjj5DOMcH1q40jSrTR4opUmkllCY4E2UE9nL/WsmHI3wjFJZ9osofTS0lumiax1JQGwHa1JXby3HwzV+uoQDCm5iBAyQ0gz+dZlZ34DtwkHbfbJ5f14UPNJgiJAvCZAFO+erufyqkU/aElCHpmvbWLOMZa6gB7+MVkvS30h1W/vvsnQp4oYhAXmuGYASk/gBP5DfNBz8DXZLHGeIbnB33/SqyWzka44o2KZ6pYbnIzjHzoygLFJE3oxr916P3yx3iRtbTNGl0xYcUZx1WBzyAO+K2PoBKi2mqRArxLqMpOB34+lZbTtOttZX1PU4iZI3VxKvVZlBwVz25HwPdWr9DIovVb6SJAvFeyA4GAcYA/Xu7dqi4LcWm/x3I1IkqaN8sPOh0j2qTgwCfCllXElGTyeDa9LLPrN1PK4YySEksOeef617XYCDoUlhiiUugPEiAZBGedeMww+s67bxHlJdRofIsBXqWgzPLoenu3tNbRlvPhGalKtSNMp7UjQBs04Gq9HaiEZsVjs06KQuYBciFBsuKrHbPI4GalF0k46xx4/51BddWIsMEePI/WvdjlHlywOUsPZbendJMOTVW/aAwAer2bjn5CuHURHuFI8Cd/8AKnw2J4LqO4u062cjuqHUNf8As+FneI5x7I3+NVJ1k7IAee4VgMDvyTiqe8kfV9RjKS8EVuoJYoAwzuM88t+m55ipyST8ovXHKzklt9L1C/1eXUbtQsdxHg5OGXrKQCAOwDtq5lQRr1EVkQYXiIXu37aj06FpIl+9YEAYORnx7N/65UaTBGwHHwRJ7TNjHvqSyn4NW1Y8gcMbrKI5I8qil+JTsCSQM7d2aFdZzOBBErFQzdYlSeXn31aWRWa1kmDGIuc7/L5D5UBp85Sa4kKgsyrgnxyT+lGO6R01GGEVM630ZWdoowVk26zDGc47B31yY3nQu0jR8Ctx4VT2c9yfOj79mktCz4JDocA4/EKJFsVOejDduDuKpt7IZefBR3Ms7EyqqmLPWUDnjvxz7dqHvLzURaRy6NeSW4YN0kUEjDpW7TnsJHZ50ekUkSZwSRkEcJ7O3f40z7OkvZWt4JFV3YT25bYKw2bPh3juJoPEkOk4vya79k2rT6noMy30pkaCbo0kkPEzDhB3J37a290Ohs5XAGAjHI8jWB9FQLK2ktugNvdM5nljznjztxAjYjbG361eXdxMbGcsGK9G35GoKvxnIXL8uDy/R0A9KLAHsvVPwbP6V6RoIiOkwqvVKNJHj+zIy/pXnGihh6SWkhweGdjjtGAa22kArFcRq2OG6mOP7Tlv8VThFlLZI0IAHJ/hyqTJxsPfVR1l3JJ8qIhuo4+ec+NdKvIikYz12RXDEAEHYuc48hQl3q9xxcCkyOQDxEYUCgy2d/GopkMl0uO1SPzrfa8RyjHSlKzyXE8RTTrG7aY9Jdh2YAYC4I2/zoNg6gnsG5IGRRd6kj+jOklQcrJONuzrE5+VVBvi3BDFC7qzdV36pkPYAvd+mSahpr39LdJ+zTfQvrbUhqxtLKIYPvbrh4lYpxEgnd28PlsB2Cry1tWjEVrDGi8XNnPWJ5nJ7zvTbG1On2+4DXc2DLIBz22AHcOwfWkWLP8AcbkdXJP6f186Z9sPHhF7iSz6iKrysuAxBxt4427PdioLqC+uopYIAhLABifZIPMe8fnQMSTGIPLno1JA65zV/aNFaW6q5CMesVHIMf6x7qThFWtzKtLW9MHRGPhK7MeI4Y9425bnfFD2z+rRyIbZnMkmQ5II22/T51ojKpjkkLfgOR5Cq4QGO2jJXdFGfE7Cn3ZWBHHbIq75mXSjMUIDcIXHaeIYGPOrH2rJZiWVsqxHERg0zVYlOiPxbqkqHly6wP6VFA0iWKhUGVAJynb/AFiljlywPLEYZI3j6VmELI3GFbc8yoxnbwA+NCtBd2TdLG6FcjKAnOCcmi3mEIgKpw9bhORsOLYcv3uGi7kp0PErc14eA7jiHKrwikZpyb4CdFkN7DA0Mj8cYHQDOeE4OQdvZIx8quNQuC2lXQwVYwMCrcgcdvjWD9bk0m5RllKJN11AzgsOYz2DG499aKXX47nTp7e4RUlKERsm/uJ8sfCo2wallf2WhJSikZP0cQyektqxxhi39xjWusY+jvdSj7rkMPIxx/rmsl6JyMdZiZ1wyoxODt7OP1rXwSA6pdD8Jjif48Q/w1KHAbPLCm6ozQ0hyaOypXlmoiFzyxTkTAMw4t12qZ7KeF4JriLEcvEEbiBzj8udKlTXv8GLpv8Aoiy1KYR+itvx7RrPLxEd25Pn5UJolhInBf3WEuJU+5jByIoz+p5k+VKlWPTPKf8AJv1KW4PbEeeEkknCk8/jXIUUewAWx3eNKlWufJKvgmgj6bVIoyAscYMhwOYG354q3eETqGLsEY8WCM4GKVKuYI8jLtei0yQIo4nHApwOTHFQ3qSSjg6QqrZU4+dKlQiF+yn1ln+x2zJIAu2ze0PGp9PctFFxt1uHfbntSpVaPJmb8El3G02nXHRMBJwEIccmHI/ECpLW7t7nT7ad4g8cyiQIwzilSqv6gFfrFvBfRtbtGeFs8J22rP2b3KTxRM6siqyYI9nGSffkUqVJePWRQalLp93FPbyESgYBAGc92/lWv0e7XULkP0g9YMIVlKcPFwknfG2etSpVjikaJN7cFmtxjZQRUyuSMmlSqrMvs//Z",
  },
  tooltip: {
    enterable: true,
  },
};

const vchart = new VChart(spec, { dom: CONTAINER_ID, disableDirtyBounds: true });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

![Uploading image.png…]()

Expected Behavior

axis should be show

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response