如何将垂直线保持在水平标尺线下方是 chartjs？

Question

Chartjs 版本：3.7.0 （任何专家建议另一个版本？在下面评论！）

我有这个代码：

<script>
new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1800,1850,1900],
    datasets: [{ 
        data: [86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});
</script>

这张图表看起来像这样：

问题: 如何保留下图中用红色圈出的线，但删除用黄色圈出的线？（我想删除所有的垂直线）。

我想让它看起来像这样（线框）：

Answer 1

你传入选项 > 比例 > x > 网格 > display:false
示例：

let myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { grid:{ display:false } }, // will hide vertical gridlines
      y: { grid:{ display:true } } // will show horizontal gridlines
    },
  }
});

所以在你的情况下：

<script>
new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1800,1850,1900],
    datasets: [{ 
        data: [86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    },
    scales: {
      x: { grid:{ display:false } },
      y: { grid:{ display:true } }
    }
  }
});
</script>

Answer 2

您可以隐藏 xAxes 网格线。请参阅文档 here。示例：

var myChart = new Chart(document.getElementById("myChart"), {
  type: "line",
  data: {
    labels: [1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900],
    datasets: [{
      data: [86, 114, 106, 86, 114, 106, 86, 114, 106, 86, 114, 106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, {
      data: [282, 350, 411, 282, 350, 411, 282, 350, 411, 282, 350, 411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, {
      data: [168, 170, 178, 168, 170, 178, 168, 170, 178, 168, 170, 178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }, {
      data: [40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10],
      label: "Latin America",
      borderColor: "#e8c3b9",
      fill: false
    }, {
      data: [6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2],
      label: "North America",
      borderColor: "#c45850",
      fill: false
    }]
  },
  options: {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script>
<html>

<body>
  <div class="myChartDiv" style="width: 600px;">
    <canvas id="myChart"></canvas>
  </div>
</body>

</html>

如果您只想隐藏绘图区域内的网格线，您可以设置 drawOnChartArea: false，请参阅下面的很好的答案。

Answer 3

您可以将网格选项中的 drawOnChartArea 设置为 false，您的标题也不起作用，因为它配置在错误的命名空间中，必须在 plugins 部分进行配置：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      y: {
        grid: {
          drawOnChartArea: false
        }
      },
      x: {
        grid: {
          drawOnChartArea: false
        }
      },
    },
    plugins: {
      title: {
        display: true,
        text: 'Title of the chart'
      }
    }
  }
}

const 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/3.7.0/chart.js"></script>
</body>

如何将垂直线保持在水平标尺线下方是 chartjs？

How can I keep the vertical lines under the horizontal ruler line is chartjs?

javascript

charts

chart.js