当前位置: 首页 > 知识库问答 >
问题:

图表.js结合散点和折线

云弘壮
2023-03-14

我是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>

我尝试在许多地方放置标签:labels1,但它们从未显示出来。正如你在附图中看到的,折线图也没有显示出来。

图表.js 版本为3.6.2

任何帮助都将不胜感激。

顺致敬意,

共有1个答案

白文彬
2023-03-14

这是因为散点图在默认情况下使用线性轴作为x轴,而折线图使用类别轴,它们彼此不兼容,因此需要使用第二个x轴。此外,标签数组位于错误的位置,它应该位于配置的<code>数据<code>部分:

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>
 类似资料:
  • 我是Dash的新手,在尝试基于范围滑块的范围/值进行可视化筛选时遇到了一些问题。我已经附加了我下面使用的代码块,但我似乎无法开始工作。我已经看了留档,但不知道这个问题是否与RangeSliders有关,或者只是我如何尝试通过“和”命令过滤数据框。

  • 我正在绘制一个仪表板,在一个散点图中有多个x特征,每个特征要么显示为直线,要么显示为带标记的直线。 我已经根据我指定的要求构建了散点图,但是,当我在本地运行仪表板时,实际上看不到散点图 这是我写的代码 这是我的数据样本 }

  • 我想创建一个包含点和线的图表,如下图所示。 我尝试了多图表与类型:'线''条形图',它似乎工作。但是当我指定'散点''行'时,没有散点数据显示出来。 有可能使用角度nvd3进行此操作吗? 非常感谢你的帮助。 这是我的柱塞代码:

  • 散点图沿 X 和 Y 轴放置的各个数据点来绘制数据。 图表属性 选择图表类型后,可以更改其属性来自定义图表: 选项 描述 常规 背景颜色 设置图表区域的背景颜色。 不透明度 设置背景颜色的不透明度。 显示边框 显示图表外部边框。 边界颜色 设置图表外部边框的颜色。 显示标题 显示图表的主要标题。 标题 指定图表的标题。 标题字体 设置标题的字体样式。 位置 设置标题的位置。 对齐 设置标题的水平对

  • 散点图沿 X 和 Y 轴放置的各个数据点来绘制数据。 图表属性 选择图表类型后,可以更改其属性来自定义图表: 选项 描述 常规 背景颜色 设置图表区域的背景颜色。 显示边框 显示图表外部边框。 边界颜色 设置图表外部边框的颜色。 显示标题 显示图表的主要标题。 标题 指定图表的标题。 标题字体 设置标题的字体样式。 位置 设置标题的位置。 对齐 设置标题的水平对齐方式。 数据 颜色 设置数据系列的

  • 散点图沿 X 和 Y 轴放置的各个数据点来绘制数据。 图表属性 选择图表类型后,可以更改其属性来自定义图表: 选项 描述 常规 背景颜色 设置图表区域的背景颜色。 不透明度 设置背景颜色的不透明度。 显示边框 显示图表外部边框。 边界颜色 设置图表外部边框的颜色。 显示标题 显示图表的主要标题。 标题 指定图表的标题。 标题字体 设置标题的字体样式。 位置 设置标题的位置。 对齐 设置标题的水平对