The page is blank？

[wanghaixu]

Expected Behavior

Actual Behavior

npm i => npm run dev => The page is blank

Environment

• OS: Write here
• NPM Version: Write here
  ^1.1.3

[apertureless]

Hello @wanghaixu

yes, the page is blank, because the entrypoint index.js contains only the exports of all modules.

If you want to see the example charts you would have to create a vue instance and import the app component under the examples folder.

import Vue from 'vue'
import App from './examples/App.vue'

/* eslint-disable no-new */
new Vue({
  components: { App }
}).$mount('#app')

[wanghaixu]

ok

[apertureless]

I will maybe change the webpack conf for develeopment so it does not use the index.js as an entry point, but a dev.js or main.js with the imported app.

[wanghaixu]

I want to apply to the mobile devices, but the effect is not very good。

[wanghaixu]

[apertureless]

You should check the Chart.js documentation

There are two options for responsiveness:

• responsive
• maintainAspectRatio

If you set responsive to true, the chart will always fill the whole div in which the canvas is. If you set it to false, the canvas will set the width and height to the value which you set over the width and height props. And it resizes the chart, if the div resizes.

And with maintainAspectRatio you maintain the original canvas aspect ratio (width / height) when resizing

You can try to play around with this settings to get a better responsive view.
However you will have to apply styles etc. to the containing div.

[wanghaixu]

Thank you for your guidance