Question

我有1000个x / y点的集合。我想将它们绘制在图表上，并用一条线将它们连接在一起。这应该很容易做到，但是在阅读文档时，没有plot（x，y）类型的函数。我注意到以下情况：

似乎必须为每个x值创建一个标签。我可能不知道图表创建时的x值
我的数字很大，很多小数位。我认为这意味着大多数x值最终会出现在标签之间。
是否可以在不具有圆形绘图点形状的情况下绘制点？基本上是一条基于x / y数据创建的从左到右一直延伸的平滑线吗？

以下是一些示例数据，您可以了解一下：

data: [ 
  {x: 21345.67890, y: 40},
  {x: 22783.12345, y: 43},
  {x: 27900.00012, y: 80},
  // many more plot points
],

我缺少明显的东西吗？有没有一个简短的例子，有人可以举报给我看它是如何工作的？

Answer 1

似乎必须为每个x值创建一个标签。我可能不知道图表创建时的x值

我不确定您的数据如何产生，但是在考虑所提供的信息之后，您应该创建一个包含所有数据点的对象，并在图表函数中使用该对象。

要为此部分提供解决方案，我们需要更多有关如何构建数据的信息。

我的数字很大，很多小数位。我认为这意味着大多数x值最终会出现在标签之间。

嗯，这或多或少是折线图的精神。根据数据的值，您应该正确地定义轴，以使数据可视化。

有没有办法绘制点而没有圆形绘制点形状？基本上是一条基于x / y数据创建的从左到右一直延伸的平滑线吗？

Chart.JS带有很多选项。例如。您可以使用pointStyle或pointRadius属性来更改您的需求点。

我附上了一个示例，供您根据需要进行调整。如您所见，线条被平滑地可视化了。该示例将多种图表类型合而为一。您只需删除条形部分即可。

有关更多参考，请查阅官方文档，尤其是折线图部分：https://www.chartjs.org/docs/latest/charts/line.html

var optionsMulti = {
            chart: {
              height: 280,
              width: 375,
              type: 'line',
              stacked: false,
              toolbar: {
                show: false
              },
              plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
              },
            },
            },
            series: [{
              name: 'Goals scored',
              data: [2, 4, 5, 1, 1, 3, 3, 2, 4, 5, 1, 3]
            }, {
              name: 'Goals Conceded',
              data: [1, 1, 3, 4, 2, 2, 3, 2, 1, 2, 5, 3]
            }, {
              name: 'Points gained',
              type: 'column',
              data: [3, 3, 3, 0, 0, 3, 0, 0, 3, 3, 0, 1]
            }],
            stroke: {
              width: [4, 4, 4],
              curve: 'smooth'
            },
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            xaxis: {
              type: 'category',
              line: {
                show: false
              },
            },
            yaxis: {
              min: 0,
              max: 6,
              tickamount: 6,
              labels: {
                show: false
              },
              line: {
                show: false
              },
            },
          };

          var chartMulti = new ApexCharts(
            document.querySelector("#chartMulti"),
            optionsMulti
          );

          chartMulti.render();

<html>

<body>

<div id="chartMulti"></div>

</body>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</html>

ChartJS在折线图中绘制x / y

1 个答案: