html 顶点散点图显示不正确

mkshixfv  于 2023-03-11  发布在  其他
关注(0)|答案(1)|浏览(130)

我正在使用HTML、Javascript和Apex Charts构建一个散点图。我调用API获取数据，然后相应地更新图表。到目前为止，一切正常，但有一个特定的数据集导致图表显示同一Y轴线上的所有点，而不是分散的。我不知道为什么会这样。
我通过创建两个图表来最小化地再现这个问题--一个图表包含一个数据集，生成一个可用的散点图，另一个图表包含一个类似的数据集，生成一个所有点都在一条线上的图表。
第一节第一节第一节第一节第一次

$(function () {
  createChart1();
  createChart2();
});

const peopleData1 = [
  [114, 616],
  [74, 252],
  [45, 134],
  [40, 752],
  [27, 619],
  [21, 919],
  [21, 88],
  [20, 140],
  [18, 122],
  [15, 56],
  [15, 49],
  [14, 99],
  [13, 124],
  [13, 85],
  [13, 91],
  [13, 69],
  [12, 78],
  [11, 2299],
  [11, 59],
  [10, 42],
  [10, 175],
  [10, 319],
  [10, 55],
  [10, 86],
  [9, 5],
  [9, 28],
  [9, 108],
  [8, 51],
  [8, 86],
  [8, 72],
  [8, 49],
  [8, 89],
  [8, 109],
  [8, 245],
  [8, 366],
  [8, 190],
  [7, 25],
  [7, 70],
  [7, 13],
  [7, 85],
  [7, 160],
  [6, 243],
  [6, 53],
  [6, 34],
  [6, 44],
  [6, 643],
  [4, 2151],
  [5, 1528],
  [1, 1163],
  [1, 1133],
  [5, 697],
  [0, 621],
  [0, 579],
  [0, 338],
  [0, 315],
  [6, 308],
  [1, 301],
  [1, 299],
  [1, 276],
  [1, 270],
  [2, 264],
  [0, 256],
  [0, 245],
  [1, 239],
  [4, 237],
  [0, 236]
];
const peopleData2 = [
  ["9", "2162"],
  ["9", "555"],
  ["9", "809"],
  ["809", "4850"],
  ["8", "2151"],
  ["8", "74"],
  ["8", "58"],
  ["8", "821"],
  ["8", "650"],
  ["72", "5315"],
  ["7", "317"],
  ["7", "43"],
  ["68", "14791"],
  ["654", "2963"],
  ["6", "488"],
  ["6", "78"],
  ["6", "2122"],
  ["6", "320"],
  ["6", "1642"],
  ["6", "134"],
  ["6", "369"],
  ["5", "257"],
  ["5", "29"],
  ["5", "191"],
  ["5", "54"],
  ["5", "38"],
  ["5", "45"],
  ["5", "670"],
  ["457", "10056"],
  ["4", "24"],
  ["4", "536"],
  ["4", "44"],
  ["4", "157"],
  ["4", "174"],
  ["4", "128"],
  ["4", "126"],
  ["4", "75"],
  ["4", "106"],
  ["4", "137"],
  ["4", "117"],
  ["4", "129"],
  ["4", "26"],
  ["4", "372"],
  ["33", "483"],
  ["3", "237"],
  ["0", "992"],
  ["0", "99"],
  ["0", "99"],
  ["0", "99"],
  ["0", "99"],
  ["2", "98"],
  ["0", "98"],
  ["0", "98"],
  ["0", "98"],
  ["0", "97"],
  ["1", "97"],
  ["0", "97"],
  ["0", "97"],
  ["1", "97"],
  ["0", "96"],
  ["0", "96"],
  ["0", "95"],
  ["0", "95"],
  ["0", "95"],
  ["0", "95"],
  ["0", "95"],
  ["1", "95"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "94"],
  ["0", "936"],
  ["0", "93"],
  ["1", "93"],
  ["0", "93"],
  ["0", "93"],
  ["1", "93"],
  ["0", "93"],
  ["0", "93"],
  ["0", "92"],
  ["1", "92"],
  ["0", "92"],
  ["0", "92"],
  ["1", "92"],
  ["0", "92"],
  ["1", "91"]
];
const brandsData1 = [
  [533, 1384],
  [99, 59],
  [57, 5677],
  [55, 373],
  [38, 2608],
  [37, 438],
  [29, 6584],
  [29, 979],
  [27, 173],
  [21, 178],
  [21, 108],
  [16, 355],
  [14, 3439],
  [12, 65],
  [12, 22],
  [12, 73],
  [10, 48],
  [10, 102],
  [8, 67],
  [8, 64],
  [8, 108],
  [8, 129],
  [7, 73],
  [7, 4535],
  [7, 53],
  [6, 7],
  [6, 37],
  [6, 113],
  [6, 10],
  [5, 3270],
  [0, 1761],
  [1, 1477],
  [2, 1344],
  [4, 1166],
  [1, 1139],
  [6, 1099],
  [0, 992],
  [0, 966],
  [2, 938],
  [1, 803],
  [0, 749],
  [0, 650],
  [0, 564],
  [0, 559],
  [1, 545],
  [2, 484],
  [2, 479],
  [0, 472],
  [0, 457],
  [2, 453],
  [0, 415],
  [1, 389],
  [2, 382],
  [2, 356],
  [0, 340],
  [2, 302],
  [2, 300],
  [0, 293],
  [0, 274],
  [4, 244],
  [3, 242],
  [1, 239],
  [1, 239]
];
const brandsData2 = [
  ["9", "64"],
  ["7", "595"],
  ["7", "166"],
  ["7", "23"],
  ["7", "373"],
  ["61", "4126"],
  ["6", "448"],
  ["6", "47"],
  ["6", "117"],
  ["6", "200"],
  ["6", "2116"],
  ["6", "26"],
  ["6", "421"],
  ["6", "1151"],
  ["6", "309"],
  ["50", "292"],
  ["5", "70"],
  ["5", "35"],
  ["5", "426"],
  ["5", "790"],
  ["5", "26"],
  ["5", "141"],
  ["4", "1363"],
  ["4", "117"],
  ["4", "125"],
  ["4", "178"],
  ["4", "77"],
  ["4", "26"],
  ["31", "101"],
  ["3", "75"],
  ["0", "99"],
  ["0", "98"],
  ["0", "98"],
  ["0", "98"],
  ["0", "98"],
  ["0", "97"],
  ["1", "97"],
  ["0", "97"],
  ["0", "97"],
  ["0", "97"],
  ["0", "97"],
  ["13", "961"],
  ["0", "96"],
  ["0", "95"],
  ["0", "95"],
  ["1", "94"],
  ["0", "94"],
  ["0", "94"],
  ["1", "93"],
  ["0", "93"],
  ["0", "93"],
  ["0", "93"],
  ["0", "92"],
  ["0", "92"],
  ["2", "92"],
  ["0", "92"],
  ["0", "92"],
  ["2", "91"]
];

// Functions to create charts
const createChart1 = () => {
  var options = {
    series: [
      {
        name: "Brands",
        data: brandsData1
      },
      {
        name: "People",
        data: peopleData1
      }
    ],
    chart: {
      height: 350,
      id: "brands-people-chart",
      type: "scatter",
      zoom: {
        enabled: true,
        type: "xy"
      }
    },
    xaxis: {
      tickAmount: 10,
      labels: {
        show: false
      },
      title: {
        text: "Popularity",
        offsetX: 0,
        offsetY: 0,
        style: {
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 600,
          cssClass: "apexcharts-xaxis-title"
        }
      }
    },
    yaxis: {
      labels: {
        show: false
      },
      title: {
        text: "Influence",
        offsetX: 0,
        offsetY: 0,
        style: {
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 600,
          cssClass: "apexcharts-yaxis-title"
        }
      }
      // tickAmount: 7,
    },
    legend: {
      show: true,
      itemMargin: {
        horizontal: 5,
        vertical: 10
      }
    },
    tooltip: {
      enabled: true
    }
  };

  var chart = new ApexCharts(document.querySelector("#chart__1"), options);
  chart.render();
};

const createChart2 = () => {
  var options = {
    series: [
      {
        name: "Brands",
        data: brandsData2
      },
      {
        name: "People",
        data: peopleData2
      }
    ],
    chart: {
      height: 350,
      type: "scatter",
      zoom: {
        enabled: true,
        type: "xy"
      }
    },
    xaxis: {
      tickAmount: 10,
      labels: {
        show: false
      },
      title: {
        text: "Popularity",
        offsetX: 0,
        offsetY: 0,
        style: {
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 600,
          cssClass: "apexcharts-xaxis-title"
        }
      }
    },
    yaxis: {
      labels: {
        show: false
      },
      title: {
        text: "Influence",
        offsetX: 0,
        offsetY: 0,
        style: {
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 600,
          cssClass: "apexcharts-yaxis-title"
        }
      }
      // tickAmount: 7,
    },
    legend: {
      show: true,
      itemMargin: {
        horizontal: 5,
        vertical: 10
      }
    },
    tooltip: {
      enabled: true
    }
  };

  var chart = new ApexCharts(document.querySelector("#chart__2"), options);
  chart.render();
};
#charts-parent-container {
  width: 70%;
  padding: 10px 10px;
}

#chart-title__2 {
  margin-top: 2rem;
  font-weight: 600;
  font-size: larger;
}

#chart-title__1 {
  font-weight: 600;
  font-size: larger;
}
<!-- Import Libraries -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- Apex Charts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id='charts-parent-container'>
  <div id='chart-title__1'>CHART 1 (working)</div>
  <div id='chart__1'></div>
  <div id='chart-title__2'>CHART 2 (not working)</div>
  <div id='chart__2'></div>
</div>
Html

1条答案

按热度按时间
dsekswqp

dsekswqp1#

愚蠢的错误--API返回的第二个数据集是字符串而不是数字，这导致图表显示不正确。
喜欢当它是一个后端问题！

赞(0）分享  回复(0）举报  2023-03-11
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com