简体   繁体   中英

Chart.js errors with graph different from horizontalbar

Chart.js Version: 2.7.1

I have in use since two years some pages which present a number of graphs, always with horizontal bars, but now I wish to select different formats, like bar and line.
When one of these options is selected I always get the same error: 'TypeError: e.slice is not a function'.
I thought that in the chart option is only required to change the tipe of graph, but possibly I'm missing something else.

This is the chart declaration:

        var myBarChart = new Chart(ctx, {
        type: 'horizontalbar',
        data: {
                labels: nameArray,
                datasets: [{
                    label: 'Visite nel periodo alla pagina: ' + pag ,
                    data: valueArray,
                    backgroundColor:'rgba(255, 32, 0, 0.5)'
                }]
          },
            options: chartOptions,                          
        });

And this is the chartOptions (sorry, is quite long):

    chartOptions = {
        maintainAspectRatio:false,
        aspectRatio:4,
        fontStyle:"bold",
        defaultFontStyle:"bold",
    scales: {
      xAxes: [{
          display: true,
          gridLines: {
              display: true
          },
          labels: {
              show: true,
              fontStyle:"bold"
          },
      }],

      yAxes: {
            display: true,
            position: "left",
            id: "y-axis-1",
            gridLines:{
                display: false
                },
                  scaleLabel: {
                    display: true,
                    labelString: "Acquisti",
                    fontColor: 'rgba(0, 80, 212, 0.5)',
                    fontSize:18,
                    fontStyle:"bold"
                    },
                  ticks: {
                    beginAtZero: true,
                    min:0,
                    fontSize:14,
                    fontStyle:"bold",
                    fontColor:"#03a"
                    },
            labels: {
                show:true,
                fontStyle:"bold"
                }
        }

    },
    layout: {
        padding: {
            left: 10,
            right: 10,
            top: 0,
            bottom: 0
        }
      },
    title: {
        display: true,
        fontColor: "#c40",
        fontSize: 16,
        text: chartTitle,
        }
    };

When I want to switch from a format to another I only programmatically change this line : type: 'bar' or type: 'line'.
Is there anything else I should change?

Thanks

I finally found the problem, even if the original cause is still unknown. In the 'options' declaration there was an offending block, this one:

      labels: {
          show: true,
          fontStyle:"bold"
      },

I do not recall where this block is coming from, possibly some tests in the past; even leaving only the 'labels' declaration without any parameters, raises the error. Deleting the block makes the chart perfect.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM