如何在条形图中从y轴的起点开始线系列- chart.js

8tntrjer  于 2022-12-23  发布在  Chart.js
关注(0)|答案(2)|浏览(223)

我们有一个与chart.js相关的业务的新要求。
考虑下图,我们在一个图表中有条和线。线图表在图表中只有几个点。

在应用程序中,用户可以选择他想要显示的特定周范围。假设用户选择“w16/22”到“w28/22”。由于我们在“w16/22”之前有一个点,即在“w14/22”上,我们需要从y轴到图表上的第一个点,即在“w18/22”上绘制一个折线图。然后这个点连接到第二个点,以此类推。
有关预期输出的更详细视图,请参见下图。

在chart.js中,实际上是否有可能在y轴起始处不绘制任何值的情况下获得此输出,或者我们是否需要采用任何其他方法来获得此预期输出。
请帮助我找到这个问题的解决方案。

2exbekwf

2exbekwf1#

我不**100%**确定这是否适用于您的特定图表,也就是说,您可以简单地从x轴设置minmax值。(更多细节请参见link to the documentation

如本例所示:

/** DEMO TESTDATA START **/
const labels = [
    'w01/22', 'w02/22', 'w03/22', 'w04/22', 
    'w05/22', 'w06/22', 'w07/22', 'w08/22', 
    'w09/22', 'w10/22', 'w11/22'
];

const clampedLabels = labels.slice(1, labels.length -2)
const dataSet1 = [50, 40, 10, 100, 90 ,60, 20, 10, 100, 90, 90];
const dataSet2 = [... dataSet1]
    .map( (n,i) =>  {
      return {y: n, x: labels[i]}
    })
    .filter((n,i) => i % 2 == 0);
    
/** DEMO TESTDATA END **/

const data = {
  labels: labels,
  datasets: [{
      label: 'Bar Chart',
      data: dataSet1,
      backgroundColor: '#0000ff',
      order: 1
    }, {
      label: 'Line Chart',
      data: dataSet2,
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      type: 'line',
      order: 0
    }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
      responsive: true,
      plugins: {
          legend: {
              position: 'top',
          },
          title: {
              text: 'Unclamped',
              display: true
          }
      }
  }
};


const data2 = {
  labels: labels,
  datasets: [{
      label: 'Bar Chart',
      data: dataSet1,
      backgroundColor: '#0000ff',
      order: 1,
      fill: false,
    }, {
      label: 'Line Chart',
      data: dataSet2,
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      type: 'line',
    }]
};

const config2 = {
    type: 'bar',
    data: data2,
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                text: 'Clamped from W02/22 - W08/22',
                display: true,
            }
        },
        scales: {
            x: {
                min: clampedLabels[0],
                max: clampedLabels[clampedLabels.length-2],
            }
        }
    }
};

new Chart( document.getElementById('chart'), config );

new Chart( document.getElementById('chart2'), config2 );
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
<div class="chart" style="width:500px;">
    <canvas  id="chart2" ></canvas>
</div>
<div class="chart" style="width:500px;">
    <canvas  id="chart" ></canvas>
</div>
dsf9zpds

dsf9zpds2#

您可以通过更改x轴的最小属性值来实现您的要求。最初,我们呈现了如图所示的图表。我们可以根据您的要求设置x轴的最小值,从而从y轴的起点呈现折线图。我们创建了一个简单的Angular 应用程序来演示这一点。请找到下面的stackblitz链接以供参考。
示例链接:https://stackblitz.com/edit/angular-a3xvsv-2iblmd?file=app.component.ts
代码片段:

<button (click)="changeMinValue($event)">Change value</button>
                             <ejs-chart style='display:block;' #chart  [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [zoomSettings]='zoom'
                                           [tooltip]='tooltip' (load)='load($event)'>
                                           <e-series-collection>
                                                          <e-series [dataSource]='data' fill="red" type='StackingColumn' xName='x' yName='y' width=2> </e-series>
                                                          <e-series [dataSource]='data' fill="yellow" type='StackingColumn' xName='x' yName='y1' width=2 > </e-series>
                                                          <e-series [dataSource]='data' fill="blue" type='StackingColumn' xName='x' yName='y2' width=2 > </e-series>
                                                          <e-series [dataSource]='data' fill="green" type='StackingColumn' xName='x' yName='y3' width=2 > </e-series>
                                                          <e-series [dataSource]='data1' fill="red" type='Line' xName='x' yName='y' width=3 [marker]='marker'> </e-series>
                                           </e-series-collection>
                             </ejs-chart>
              
              
public changeMinValue(e: Event): void {
        this.chart.primaryXAxis.minimum = 3;
        this.chart.refresh();
    }

截图:
初始渲染:
点击按钮后:

相关问题