鍍金池/ 問(wèn)答/HTML5  HTML/ primeNG怎么使用混合圖表

primeNG怎么使用混合圖表

primeNG是使用的chart.js作為圖表的,單獨(dú)的chart.js是可以使用混合圖表的,我想問(wèn)下primeNG怎么使用混合圖表。
模板的寫法:

<p-chart type="scatter" [data]="data" [options]="options"></p-chart>

我按照chart.js的寫法
但是它只顯示分散圖的點(diǎn),而不顯示線性圖。下面是代碼:

this.data = {
  datasets: [
    {
      label: '',
      data: [{x:1,y:5},{x:3,y:7},{x:8,y:10}],
      fill: false,
      borderColor: '#fff'
    },
    {
      label: '',
      data: [{x:5,y:8},{x:3,y:7},{x:8,y:10}],
      fill: false,
      borderColor: '#fff',

      type: 'line'
    }
  ]
}
this.options = {
  responsive: false,
  title: {
    display: true,
    text: '',
    fontSize: 12
  },
  scales: {
    yAxes: [
      {
        scaleLabel: {
          display: true,
          labelString: 'KKWH'
        },
        gridLines: {
          display: false
        }
      }
    ],
    xAxes: [
      {
        type: 'linear',
        position: 'bottom'
      }
    ]
  }
};

回答
編輯回答
骨殘心

經(jīng)過(guò)反復(fù)查看文檔,發(fā)現(xiàn)當(dāng)line類型的chart和scatter混合使用時(shí),在模板的type里寫scatter,在數(shù)據(jù)集里寫type:line的話,需要在line數(shù)據(jù)集里寫上這個(gè)showLine: true才能顯示出線條,否則只顯示點(diǎn)。反之,在模板的type里寫line,在數(shù)據(jù)集里寫type:scatter的話,就不需要寫showLine: true。

2017年9月8日 21:05