在 Jscharting 中处理空数据

Question

我有这个从 csv 文件加载数据的 Jscharting 脚本。它工作得很好，但不幸的是，如果源中有任何空数据，它根本不会加载。您如何将处理空数据添加到以下脚本中？

JSC.fetch( 
  './js/data.csv'
).then(function(response) { 
  response.text().then(function(t) {
       
var jsonData = JSC.csv2Json(t,{coerce:function(d){
  return {
    Date: d.date,
    s1: parseFloat(d.s1),
    s2: parseFloat(d.s2),
  }

}});

var s1Points = JSC.nest()
  .key('Date')
  .rollup('s1')
  .points(jsonData);

var s2Points = JSC.nest()
  .key('Date')
  .rollup('s2')
  .points(jsonData);       

var chart = JSC.chart('chartDiv', { 
  debug: true, 
  type: 'line', 
  legend_visible: false, 
  defaultCultureName: "hu-SK",
  xAxis: { 
    crosshair_enabled: true, 
    scale: { 
      type: 'time',
      time: {
              parser: 'YYYY-MM-DD',
              }
    },
    formatString: 'd',
  },
  yAxis: { 
    orientation: 'opposite', 
    formatString: 'c'
  }, 
  defaultSeries: { 
    firstPoint_label_text: '<b>%seriesName</b>', 
    defaultPoint_marker: { 
      type: 'circle', 
      
      fill: 'white', 
      outline: { width: 2, color: 'currentColor' } 
    } 
  }, 
  series: [ 
    { 
      name: 's1', 
      points: s1Points 
    }, 
    { 
      name: 's2', 
      points: s2Points 
    }
  ] 
});
});
});

我尝试了简单的方法：

s1: (parseFloat(d.s1) || '0'),
s2: (parseFloat(d.s2) || '0'),

...但结果非常难读：

在这种情况下，如果可能的话，我希望打破连续的线而不是零值。

Answer 1

使用正则 Javascript 过滤掉不良数据。

要删除 entries/rows，其中 s1 或 s2 为空或未定义：

jsonData = jsonData.filter( ({s1, s2}) => s1 != null && s2 != null);

Answer 2

我认为你需要使用 parseFloat(d.s1) || null。
并且，在系列中，将 emptyPointMode 设置为 default、ignore 或 treatAsZero。

演示JsFiddle

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Empty point mode</title>
</head>

<body>
  <script src="https://code.jscharting.com/latest/jscharting.js"></script>
  <div id="chartDiv" style="width: 100%; height: 400px;"></div>
  <script>
    function showData(t) {
      var jsonData = JSC.csv2Json(t, {
        coerce: function (d) {
          return {
            Date: d.date,
            s1: (parseFloat(d.s1) || null),
            s2: (parseFloat(d.s2) || null),
            s3: (parseFloat(d.s3) || null),
          }

        }
      });

      var s1Points = JSC.nest()
        .key('Date')
        .rollup('s1')
        .points(jsonData);

      var s2Points = JSC.nest()
        .key('Date')
        .rollup('s2')
        .points(jsonData);
      var s3Points = JSC.nest()
        .key('Date')
        .rollup('s3')
        .points(jsonData);

      var chart = JSC.chart('chartDiv', {
        debug: true,
        type: 'line',
        legend_visible: true,
        title: {
          position: 'top',
          padding: 7,
          fill: ['orange', 'orange', 0],
          opacity: 0.4,
          boxVisible: true,
          label: {
            text: 'emptyPointMode: default / ignore / treatAsZero',
            align: 'left'
          }
        },
        legend: {
          position: 'inside right top',
          defaultEntry_value: '%value'
        },
        defaultCultureName: "hu-SK",
        xAxis: {
          crosshair_enabled: true,
          scale: {
            type: 'time',
            time: {
              parser: 'YYYY-MM-DD',
            }
          },
          formatString: 'dd',
        },
        yAxis: {
          orientation: 'opposite',
          formatString: 'c'
        },
        defaultSeries: {
          firstPoint_label_text: '<b>%seriesName</b>',
          defaultPoint_marker: {
            type: 'circle',

            fill: 'white',
            outline: { width: 2, color: 'currentColor' }
          }
        },
        series: [
          {
            name: 'default',
            points: s1Points,
            emptyPointMode: 'default'
          },
          {
            name: 'ignore',
            points: s2Points,
            emptyPointMode: 'ignore'
          },
          {
            name: 'treatAsZero',
            points: s3Points,
            emptyPointMode: 'treatAsZero'
          }
        ]
      });
    }

    const data = `date,s1,s2,s3
2022-01-1,22.2,33,15
2022-01-2,25.2,30,17
2022-01-3,30.1.2,35,13
2022-01-4,20.2,25,15
2022-01-5,,,
2022-01-6,22.2,30,15
2022-01-7,23.2,31,15,
2022-01-8,23.2,31.5,16
    `;
    showData(data);

  </script>
</body>

</html>

上面demo第5天没有数据。
该演示可能不会运行在 Whosebug 上。使用 JsFiddle link.

在 Jscharting 中处理空数据

Handling empty data in Jscharting

javascript

jscharts