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

Stack Overflow用户

提问于 2021-06-03 03:26:58

回答 1查看 42关注 0票数 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。

chart.js

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-03 03:33:34

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

使用最小最大缩放比例的实时示例：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67811357

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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