时间戳

首页 > 解决方案 > ChatJS 2.8.0 最小/最大轴问题和顶部的标签

javascript - ChatJS 2.8.0 最小/最大轴问题和顶部的标签

问题描述

我正在使用 ChartJS 2.8.0，我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<div class="reportGraph">
    <canvas id="chartJSContainer"></canvas>
</div>
    <script>
        const labels = ["stable","happy","composed","certainty","active","aggressive",["responsible","causativ"],["correct","estimation"],"appreciative",["communication","level"]];
        const labels2 = [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"];
        const data = {
            labels: labels,
            datasets: [
                {
                    label: "",
                    data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
                    borderColor: "black",
                    backgroundColor: "transparent",
                    type: "line",
                    borderWidth: 2,
                    order: 0,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: "Urgently needs attention",
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    borderColor: "rgb(221, 221, 221)",
                    backgroundColor: "rgb(221, 221, 221)",
                    order: 2
                },
                {
                    label: "Requires attention",
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    borderColor: "rgb(136, 136, 136)",
                    backgroundColor: "rgb(136, 136, 136)",
                    order: 1
                },
                {
                    label: "Acceptable under perfect condition",
                    data: [0, 0, 0, 0, 0, , 0, 0, 0, 0],
                    borderColor: "rgb(228, 185, 192)",
                    backgroundColor: "rgb(228, 185, 192)",
                    order: 3,
                    type: "bar"
                }
            ]
        };
        const config = {
            type: "bar",
            data: data,
            options: {
                responsive: true,
                legend: {
                    display: true,
                    position: 'right',
                    labels: {
                        fontColor: 'black',
                        filter: function(item, chart) {
                            return item.datasetIndex !== 0;
                        }
                    }
                },
            },
            scales: {
                y: {
                    ticks: {
                        suggestedMin: -100,
                        suggestedMax: 100
                    }
                },
                x: {
                    position: "bottom",
                    grid: {
                        offset: true
                    }
                },
                x2: {
                    position: "top",
                    grid: {
                        offset: true
                    },
                    labels: labels2
                }
            }
        };
        var chart = new Chart(document.getElementById("chartJSContainer"), config);
    </script>
</body>
</html>

即使我为它添加了代码，我也无法让 Y 轴从 -100 开始到 100。此外，我也希望在图表顶部显示相同的 X 轴标签。请对我在此代码上遇到的问题有任何帮助吗？谢谢。

注意：建议代码时请不要更改库版本 2.8.0。

标签： javascriptchart.js

解决方案

您正在为音阶使用 V3 语法，版本 2 使用了不同的语法，请查看此链接以获取您正在使用的版本的文档

具有规模 min-max 的实时示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }],
      xAxes: [{offset: true},
      {
        position: 'top',
        offset: true,
        labels: [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"]
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>

推荐阅读