如何创建价格随时间变化的多二维线图

Question

我正在尝试使用 Billboard.js 创建绘图，以显示不同商店的超时价格。

这是我的尝试：

dayjs.locale('pl');

fetch('https://jcubic.pl/price.json')
  .then(res => res.json())
  .then(data => {
    var chart_data = {
        xs: {},
        columns: [],
        type: 'line'
    };
    Object.keys(data).map((shop, i) => {
        const date = `${shop}_date`;
        var prices = [shop];
        var dates = [date];
        data[shop].forEach(arr => {
            const [ price, date ] = arr;
            prices.push(price);
            dates.push(dayjs(arr[1]).format('MMM DD'));
        });
        chart_data.xs[shop] = date;
        chart_data.columns.push(prices);
        chart_data.columns.push(dates);
    });
    console.log(chart_data);
    bb.generate({
        bindto: "#chart",
        data: chart_data
    });
    //console.log(data);
});

Codepen 演示 https://codepen.io/jcubic/pen/VwjXNLE?editors=1010

问题是它不起作用。似乎我需要的是两个示例，但它没有显示如何同时使用它们。问题是时间序列示例和类别 x 轴示例都显示一个 x 轴，并且它们都显示相同的点。在我的情况下加班我有些商店可能不提供我正在策划的价格的产品。

上面示例中的线图使用 2d 个点，但它需要数字，并且类别轴和时间序列轴都只有一个 X 轴数据，并且要求所有数据在 x 轴上具有相同的点。

那么我怎样才能用多条线绘制二维线图呢？我对任何可以使用的库都满意。我想要像 Billboard.js 中那样具有多条彩色线条的线图，但无法弄清楚如何在我的案例中使用这个库。

这是 chart.js 中的示例，但它不是折线图，因为图中的线是平方的。

图片中的演示在 Codpen 上：https://codepen.io/jcubic/pen/abNKLNJ?editors=0110

Answer 1

Apexcharts tends to be a fantastic library for this sort of thing. It's free, supports timeseries, accepts null values, has localisation, lots of styling options and good documentation。我通常发现它通常已经支持所需的一切。

这是一个使用它的解决方案：https://jsfiddle.net/b5pghLja/4/

fetch('https://cdn.jsdelivr.net/npm/apexcharts/dist/locales/pl.json')
  .then(res => res.json())
  .then(pl => {
    fetch('https://jcubic.pl/price.json')
      .then(res => res.json())
      .then(data => {
        /* console.log(data); */
        var chart_data = {
          chart: {
            locales: [pl],
            defaultLocale: 'pl',
            height: 400,
            width: "100%",
            type: 'line',
            stacked: false,
            animations: {
              enabled: false,
              initialAnimation: {
                enabled: false
              }
            },
            zoom: {
              type: 'x',
              enabled: true,
              autoScaleYaxis: true
            },
            toolbar: {
              show: true,
              autoSelected: 'zoom'
            }
          },
          series: [],
          dataLabels: {
            enabled: false
          },
          tooltip: {
            shared: true,
            y: {
              formatter: function (val) {
                return (val).toFixed(0)
              }
            }
          },
          markers: {
            size: 3,
            strokeWidth: 0
          },
          stroke: {
            width: 3,
            curve: 'smooth'
          },
          xaxis: {
            type: 'datetime'
          },
          yaxis: {
            labels: {
              formatter: function (val) {
                return (val).toFixed(0);
              }
            },
            title: {
              text: 'Koszt'
            }
          }
        };

        Object.keys(data).map((shop, i) => {
          var series = {
            name: shop,
            data: []
          };

          data[shop].forEach(arr => {
            const [price, date] = arr;
            series.data.push([new Date(date).getTime(), price]);
          });

          chart_data.series.push(series);
        });

        var chart = new ApexCharts(document.querySelector("#chart"), chart_data);

        chart.render();
      });
  });

#chart {
  max-width: 100%;
  margin: 10px auto;
}

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

如果您愿意，可以为 API 数据中的每个唯一日期时间构建一个数组，然后用空值填充每个系列，其中某些日期时间没有价格条目。

如何创建价格随时间变化的多二维线图

How to create multi 2D line plot of prices over time

javascript

plot

visualization