0

我尝试定位 2 条垂直线，它们是某些测试结果列表的阈值。我的问题是，当我尝试获取不属于结果的值时，未显示线条。使用以下代码，我看到了这些行。

  • <script>
import BarChart from "@/components/TestsStatictics/BarChart.vue";
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      chartData: {
        labels: [24.35, 24, 24.2, 24.28],
        datasets: [
          {
            label: "Bar Chart",

            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(75, 192, 192, 0.2)",
            ],
            borderColor: [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(75, 192, 192, 0.2)",
            ],
            pointBorderColor: "#2554FF",
            data: [24.35, 24, 24.2, 24.28],
          },
        ],
      },
      options: {
        annotation: {
          annotations: [
            {
              type: "line",
              mode: "vertical",
              scaleID: "x-axis-0",
              value: 24.35,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "22.70",
              },
            },
            {
              type: "line",

              mode: "vertical",
              scaleID: "x-axis-0",
              value: 24.28,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "25.70",
              },
            },
          ],
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
              gridLines: {
                display: true,
              },
            },
          ],
          xAxes: [
            {
              gridLines: {
                display: false,
              },

              barThickness: 30,
            },
          ],
        },
        legend: {
          display: true,
        },
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
};
</script>

但是如果我将注释的部分更改为此（注释的值不在数据和标签值内），它不起作用：

annotations: [
            {
              type: "line",
              mode: "vertical",
              scaleID: "x-axis-0",
              value: 22,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "22",
              },
            },
            {
              type: "line",

              mode: "vertical",
              scaleID: "x-axis-0",
              value: 26,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "26",
              },
            },
          ],
4

1 回答 1

0

尝试为轴设置最大值和最小值：

suggestedMax, suggestedMin

        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
              },
              ticks: {
                suggestedMax: 35,
                suggestedMin: 20
              },
              barThickness: 30,
            },
          ],
于 2021-03-16T07:30:50.653 回答