在 JSCharting 甘特图中显示季度标记而不是年份

Question

我是这个 JSCharting 库的新手，并使用它来创建甘特图。当我将数据映射到图表上时，它会根据年份对 Y 轴进行切片。我试图根据 3 个月的时间间隔对其进行切片。我想显示每年的 Q1、Q2、Q3、Q4，而不是 2021、2022、2023。

我在下面找到了一个快速但肮脏的解决方案，可以像这样在 Y 轴上创建标记：

{
     yAxis: {
        markers: [2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028].reduce(
          (all: { label: { text: string; color: string }; value: string }[], year) => {
            return [
              ...all,
              ...[1, 4, 7, 10].map((month) => ({
                label: {
                  text: month === 1 ? "Q1" : month === 4 ? "Q2" : month === 7 ? "Q3" : "Q4",
                  color: "#ddd",
                },
                color: "#ddd",
                value: `${month}/1/${year}`,
                legendEntry: {
                  visible: false,
                },
              })),
            ];
          },
          []
        ),
      },
}

但是，当我这样做时，第一行数据会像这样覆盖季度标签。

有没有合适的方法做到这一点并在底部显示年份？如果有任何帮助，我将不胜感激。

Answer 1

您可以使用日历模式更轻松地为季度和月份创建刻度。这里是 an example.

var chart = JSC.chart('chartDiv', { 
  debug: true, 
  axisToZoom: 'x', 
  margin_right: 10, 
  xAxis: { 
    scale_type: 'time', 
    defaultTick_enabled: false, 
    customTicks: [ 
      { 
        value_pattern: 'month', 
        label_text: '%min'
      }, 
      { 
        value_pattern: 'quarter', 
        label_text: qTickText 
      }, 
      { 
        value_pattern: 'year', 
        label_text: '%min'
      } 
    ] 
  }, 
  legend_visible: false, 
  title_label_text: 
    'Apple iPhone sales (in million units)', 
  series: [ 
    { 
      type: 'line spline', 
      defaultPoint: { 
        marker: { 
          outline: { width: 2, color: 'white' } 
        } 
      }, 
      points: [ 
        { x: '04/1/2016', y: 74.78 }, 
        { x: '07/1/2016', y: 51.19 }, 
        { x: '10/1/2016', y: 40.4 }, 
        { x: '1/1/2017', y: 45.51 }, 
        { x: '04/1/2017', y: 78.29 }, 
        { x: '07/1/2017', y: 50.76 }, 
        { x: '10/1/2017', y: 41.03 }, 
        { x: '1/1/2018', y: 46.68 }, 
        { x: '04/1/2018', y: 67.32 }, 
        { x: '07/1/2018', y: 52.22 }, 
        { x: '10/1/2018', y: 41.3 }, 
        { x: '1/1/2019', y: 46.89 } 
      ] 
    } 
  ] 
}); 
  
function qTickText(v) { 
  return dateToQuarter(v[0]); 
} 
  
function dateToQuarter(d) { 
  d = new Date(d); 
  return 'Q' + (Math.floor(d.getMonth() / 3) + 1); 
}

在 JSCharting 甘特图中显示季度标记而不是年份

Show quarter markers instead of years in JSCharting Gantt Chart

javascript

gantt-chart

typescript