为何无法显示散点图？Chart.js双图同绘对数轴问题

我明白你遇到的问题了——你现在的写法错误地给Chart构造函数传递了多个配置对象，Chart.js只会处理第一个配置，所以散点图的设置被完全忽略了，只渲染了折线图。要在同一对数坐标轴上同时展示两种类型的图表，我们需要利用Chart.js的混合图表类型功能，把两个数据集整合到同一个图表实例中。

修正后的完整代码 #

<script>
new Chart(document.getElementById("line-chart"), {
  type: 'line', // 全局默认图表类型为折线图
  data: {
    labels: [18.123, 46.8603108462, 75.5976216923, 104.334932538],
    datasets: [
      {
        data: [418872.777267, 262233.131655, 180687.131758, 133676.324505],
        label: "Model",
        borderColor: "#3e95cd",
        fill: false
      },
      {
        label: 'Data',
        fill: false,
        showLine: false,
        backgroundColor: "#FF0000",
        type: 'scatter', // 给这个数据集单独指定散点图类型
        data: [
          {x: 17.0, y: 454995.091169},
          {x: 18.0, y: 457656.874749},
          {x: 19.0, y: 444574.49162},
          {x: 20.0, y: 432511.514968},
          {x: 21.0, y: 421184.776328}
        ]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: "Test"
    },
    scales: {
      xAxes: [{
        type: 'logarithmic',
        position: 'bottom'
      }],
      yAxes: [{
        type: 'logarithmic'
      }]
    }
  }
});
</script>

关键改动说明 #

• 合并数据集：把折线图和散点图的数据集放到同一个data.datasets数组中，这样它们会共享同一个坐标轴系统。
• 指定数据集类型：给散点图的数据集添加type: 'scatter'属性——因为全局图表类型设为了line，我们需要单独给散点图数据集声明类型，Chart.js会自动识别并渲染对应的图表类型。
• 整合配置项：把所有的配置（包括标题、坐标轴设置）统一放到顶层的options中，确保整个图表应用相同的坐标轴规则。
• 修正构造函数调用：现在只传递一个完整的配置对象给Chart构造函数，符合Chart.js的API规范。

这样修改后，你就能在同一个对数坐标轴图表中同时看到折线图和散点图了。

内容的提问来源于stack exchange，提问作者Peter Harris