primeNG怎么使用混合图表

新手上路,请多包涵

primeNG是使用的chart.js作为图表的,单独的chart.js是可以使用混合图表的,我想问下primeNG怎么使用混合图表。
模板的写法:

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

我按照chart.js的写法
但是它只显示分散图的点,而不显示线性图。下面是代码:

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'
      }
    ]
  }
};

阅读 2.5k
1 个回答
✓ 已被采纳新手上路,请多包涵

经过反复查看文档,发现当line类型的chart和scatter混合使用时,在模板的type里写scatter,在数据集里写type:line的话,需要在line数据集里写上这个showLine: true才能显示出线条,否则只显示点。反之,在模板的type里写line,在数据集里写type:scatter的话,就不需要写showLine: true。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题