数据可视化【highchart】——散点图

最新推荐文章于 2023-11-17 17:11:33 发布

脑公公

最新推荐文章于 2023-11-17 17:11:33 发布

阅读量178

点赞数

分类专栏：数据可视化-highchart 文章标签： javascript 前端数据可视化 highchart

本文链接：https://blog.csdn.net/weixin_44659458/article/details/125705003

版权

数据可视化-highchart 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

基本案例
在这里插入图片描述
基于案例修改后效果图如下：

代码：

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    .container {
      width: 600px;
      margin: 20px auto;
      padding: 20px;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
      border-radius: 12px;
      text-align: center;
    }
    h1 {
      border-bottom: 3px solid #000;
      padding-bottom: 12px;
    }
  </style>
  <body>
    <div class="container">
      <h1>身高 - 体重</h1>
      <div id="highchart"></div>
    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/highcharts.js"></script>
  <script>
    let option = {
      title: null,
      colors: ["pink"],
      chart: {
        type: "scatter",
        zoomType: "xy",
        marginTop: 30,
        marginLeft: 33,
        marginRight: 30,
      },
      xAxis: {
        title: {
          text: "身高",
          align: "high",
          offset: 0,
          x: 30,
          y: -14,
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true,
        lineColor: "#000",
        lineWidth: 1,
        gridLineColor: "#e6e6e6",
        gridLineWidth: 1,
        tickPositioner: function () {
          return [100, 125, 150, 175, 200];
        },
      },
      yAxis: {
        title: {
          enabled: true,
          align: "high",
          offset: 0,
          text: "CPU",
          rotation: 0,
          y: -12,
          x: 20,
        },
        floor: 0,
        ceiling: 100,
        lineColor: "#000",
        lineWidth: 1,
        gridLineColor: "#e6e6e6",
        gridLineWidth: 1,
      },
      legend: {
        enabled: false,
      },
      credits: {
        enabled: false,
      },
      tooltip: {
        pointFormat: "身高：{point.x}<br/>体重: {point.y}<br/>",
      },
      series: [
        {
          name: "身高-体重",
          data: [],
        },
      ],
      plotOptions: {
        scatter: {
          marker: {
            radius: 5,
          },
        },
      },
    };
    $(function () {
    
      let num = 400 + Math.round(Math.random() * 700);
      for (let i = 0; i < num; i++) {
        let newX = 101 + Math.round(Math.random() * 99);
        let newY = 10 + Math.round(Math.random() * 99);
        option.series[0].data[i] = { x: newX, y: newY };
      }
      $("#highchart").highcharts(option);
    });
  </script>
</html>