chart.js 结合散点和线答案

【问题标题】：chart.js combine scatter and linechart.js 结合散点和线
【发布时间】：2021-12-17 08:36:47
【问题描述】：

我是 chart.js 的新手，我正在尝试将散点图与折线图结合起来。

我一直在努力解决两个问题：

1.- 我已经成功绘制了散点图，但是没有显示折线图。没有错误信息被抛出。

2.- 我想在底部添加一些标签，但经过多次接近后，图表仅显示 x 轴上的数字。

我附上了一张图片，这样你就可以看到我现在在哪里。我手动绘制了折线图。

这是我正在使用的代码：

<script>
const ctx = document.getElementById('myChart');

Chart.defaults.elements.point.pointStyle = 'dash';
Chart.defaults.elements.point.borderWidth = 2;
Chart.defaults.elements.point.radius = 12;

const labels1 = ['A', 'B','C','T','GW','RT','MJ','JY','YJ','TR','UY','IY','TR','RE','WE','WE','WE','BV','CS', 'EW'];

const data1 = {
    datasets: [
        {
        type: 'line',
        label: 'Line Dataset',
        data: [10, 10, 10, 10],
        backgroundColor: 'rgb(0, 0, 255)',
        borderColor: 'rgb(0, 0, 255)'
        },
        {
        type: 'scatter',
        backgroundColor: 'rgb(0, 0, 0)',
        borderColor: 'rgb(255, 0, 0)',
        data: [{x:1, y:36}, {x:1, y:37}, {x:1, y:40}, {x:1, y:40}, //.... and many more!!
        }

    ],

};


const myChart = new Chart(ctx, {
    type: 'scatter',
    data: data1,
    labels: labels1,
    options: {
        scales: {
            x: {
                min: 0,
                max: 19,
                ticks: {stepSize: 1}
            },
            y: {
                min: 20,
                max: 120,
                ticks: {stepSize: 10},
                grid:{display:false}
            },
        }
    }
});

</script>

我尝试将 labels: labels1 放置在很多地方，但它们从未显示出来。如附图所示，折线图也未显示。

Chart.js 版本为 3.6.2

任何帮助将不胜感激。

最好的问候！！

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

这是因为散点图默认使用线性轴作为 x 轴，而折线图使用类别轴，它们彼此不兼容，因此您需要使用第二个 X 轴。此外，您的标签数组位于错误的位置，它应该位于配置的 data 部分：

const labels1 = ['A', 'B', 'C', 'T', 'GW', 'RT', 'MJ', 'JY', 'YJ', 'TR', 'UY', 'IY', 'TR', 'RE', 'WE', 'WE', 'WE', 'BV', 'CS', 'EW'];

const data1 = {
  labels: labels1, // place labels array in correct spot
  datasets: [{
      type: 'line',
      label: 'Line Dataset',
      data: [10, 10, 10, 10],
      backgroundColor: 'rgb(0, 0, 255)',
      borderColor: 'rgb(0, 0, 255)',
      xAxisID: 'x2' // Specify to which axes to link
    },
    {
      type: 'scatter',
      backgroundColor: 'rgb(0, 0, 0)',
      borderColor: 'rgb(255, 0, 0)',
      data: [{
        x: 1,
        y: 36
      }, {
        x: 1,
        y: 37
      }, {
        x: 1,
        y: 40
      }, {
        x: 1,
        y: 40
      }]
    }
  ],
}


const myChart = new Chart('chartJSContainer', {
  type: 'scatter',
  data: data1,
  options: {
    scales: {
      x: {
        min: 0,
        max: 19,
        ticks: {
          stepSize: 1
        }
      },
      x2: { // add extra axes
        position: 'bottom',
        type: 'category'
      },
      y: {
        min: 0,
        max: 120,
        ticks: {
          stepSize: 10
        },
        grid: {
          display: false
        }
      },
    }
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

【讨论】：

哇！！非常感谢！！我永远不会仅仅通过“反复试验”来解决这个问题。所以两个x轴都会显示？我只需要带有标签的那个。不管怎样，我会试一试，让你知道
有效！！也许我问的太多了，但是，有没有办法隐藏 x 轴标签？我的意思是线性轴标签（从 0 到 19 的数字）
请忽略我之前的问题，我已经弄清楚了。再次，非常感谢！