数据点作为比例

Question

我有一个问题在我的具体情况下找到合适的比例.

但首先让我给你简单介绍一下你在这里可以看到什么。仅供参考：我正在使用 chart.js 3.7.0.

我的图表有 堆叠条、未堆叠线和一条从上到下的未堆叠反转线。意味着我有 3 个 y 轴。 1 个位于左侧且已堆叠的 y 轴：对于堆叠的条形图为真，1 个位于左侧且未堆叠的 y 轴对于未堆叠的线（当前未显示）和 1 个位于右侧的 y 轴图表并反转为“悬挂”线。

所以我现在想做什么。所有 y 轴都应设置为高度一致的刻度值。您会看到左侧有 60 个，右侧有 300 个。三轴（其中一个未显示）应该都在相同的刻度值上，这意味着我们现在的最大 y 刻度值为 60，并且应该更高。但是最大 y 轴值不应该是一个前缀值，应该根据脚本中的数据动态计算。

我为max y轴值提出的计算方案是： • 一个最高标签的堆叠柱值/数据点的聚合最大值（在本例中为 30 + 30，来自柱“I”和柱“Q”的数据参见我的图表）---请找到一个解决方案来保留它动态的。它不一定是具有最高值总和的数据的第一个标签，而且 60 不是固定值。因此，它应该始终在堆叠条形标签中搜索总和最高的值。 加号（+） • 最高未堆叠行的最大值。在本例中为 50（“U”数据标签 1 的值 50，大于来自行“T”的标签 2 的数据值 40），但如前所述，它也可以随时更改，哪一行具有最高的最大值，所以也请使其动态化。 加号（+） • 未堆叠的悬挂线（线“W”）的最大值。在这种情况下，300，如前所述，它也可以随时更改，该行的哪个数据标签具有最高值，不必像现有数据那样是第二个标签，标签 2。 加号（+） • 一个因素（任何数字）应该可以帮助我更好地分离悬挂线、条形图和线条。所以它应该在挂线和自下而上的值之间留出一些空间。这里没有火箭科学，只是一个使规模更大的因素，以便在需要时出现更多空间。

简而言之，计算将是=>（数据中一个最高标签的堆叠条值的聚合最大值+数据中悬挂线的最大值+最高未堆叠自下而上线的最大值）*因子（你可以将它设置为 1.1)

所以在有了这个计算值之后，它也应该变成**所有三个轴**的最大比例值并且它们都应该缩放到这个相同的新max，并且也有相同的缩放步长。

我认为这将有助于更好地分离数据。

有人可以帮我在这里实现这个吗？ **作为 Javascript 和 Chart.js 的“菜鸟”，如果您可以将所有必要的代码添加到我的代码中，那么我可以立即使用它，这对我来说是最好的。

非常感谢！我知道它非常具体，但是通过浏览这个论坛，我看到很多有经验的人肯定知道如何实现这一点。 **

我的 index.html 文件

<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />

    <title>8. WIP Chart</title>
  </head>

  <body>
    <h1>Data Visualisation (Line Bar Chart)</h1>

    <h2>Dashboard</h2>

    <div style="width: 90%">
      <canvas id="myChart8"></canvas>
    </div>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"
    ></script>

    <script src="script.js"></script>
  </body>
</html>

我的 script.js 文件

var myChartObj = document.getElementById("myChart8");

var chartdata = {
  datasets: [
    {
      label: "I",
      type: "bar",
      data: [
        { x: "label 1", y: 30 },
        { x: "label 2", y: 10 },
        { x: "label 3", y: 20 },
      ],
      backgroundColor: "rgb(51, 241, 51)",
      order: 2,
      yAxisID: "Y-left-stacked",
      xAxisID: "X-left-stacked",
    },
    {
      label: "Q",
      type: "bar",
      data: [
        { x: "label 1", y: 30 },
        { x: "label 2", y: 10 },
        { x: "label 3", y: 20 },
      ],
      backgroundColor: "rgb(253, 255, 51)",
      order: 2,
      yAxisID: "Y-left-stacked",
      xAxisID: "X-left-stacked",
    },
    {
      label: "U",
      type: "line",
      data: [
        { x: "label 1", y: 50 },
        { x: "label 2", y: 20 },
        { x: "label 3", y: 10 },
      ],
      backgroundColor: "rgb(61, 61, 255)",
      borderColor: "rgb(61, 61, 255)", //true color here
      pointBackgroundColor: "rgb(255,255,255)",
      order: 1,
      yAxisID: "Y-left-not-stacked",
      xAxisID: "X-left-not-stacked",
    },
    {
      label: "W",
      type: "line",
      data: [
        { x: "label 1", y: 250 },
        { x: "label 2", y: 300 },
        { x: "label 3", y: 90 },
      ],
      backgroundColor: "rgb(126, 255, 223, .3)",
      borderColor: "rgb(126, 255, 223)",
      pointBackgroundColor: "rgb(255,255,255)",
      fill: true,
      order: 1,
      yAxisID: "Y-right-reverse-not-stacked",
      xAxisID: "X-right-reverse-not-stacked",
    },
    {
      label: "T",
      type: "line",
      data: [
        { x: "label 1", y: 30 },
        { x: "label 2", y: 40 },
        { x: "label 3", y: 20 },
      ],
      pointBackgroundColor: "rgb(255,255,255)",
      borderColor: "rgb(255, 95, 95)",
      borderDash: [5, 5],
      order: 1,
      yAxisID: "Y-left-not-stacked",
      xAxisID: "X-left-not-stacked",
    },
  ],
};

var mystackedBar = new Chart(myChartObj, {
  type: "bar",
  data: chartdata,
  options: {
    scales: {
      "X-left-stacked": {
        stacked: true,
      },
      "Y-left-stacked": {
        stacked: true,
        beginAtZero: true,
        position: "left",
        type: "linear",
      },
      "X-left-not-stacked": {
        stacked: true,
        display: false,
      },
      "Y-left-not-stacked": {
        stacked: false,
        beginAtZero: true,
        position: "left",
        type: "linear",
        display: false,
      },
      "X-right-reverse-not-stacked": {
        stacked: true,
        display: false,
      },
      "Y-right-reverse-not-stacked": {
        stacked: false,
        reverse: true,
        beginAtZero: true,
        position: "right",
        type: "linear",
      },
    },
  },
});

我曾尝试通过一些论坛寻找答案，但到目前为止还没有真正解决问题。

数据点作为比例

问题描述投票：0回答：0

最新问题

数据点作为比例

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0