JavaScript Error - Uncaught SyntaxError: Unexpected number

Question

在我的 php 中，我运行两个不同的 Select 语句并将它们传递到我的 JQuery 数组 value 和 value1 我已验证每个数组都以正确的格式保存数据，但我的问题是我的图表从未创建过。我所追求的是让第 1 组成为一个条形，让第 2 组成为一条线，显示与第 1 组相同的数据点，但它是一条线。我尝试了下面的语法，但由于没有图表显示，所以有什么地方不正确吗？

<script>  
    var ctx = document.getElementById('canvas').getContext('2d');
    var chart = new Chart(ctx, {                
        data: {
            type: 'bar',
            labels: labelsarr,
            datasets: [{
                    label: 'Set 1',
                    data: values,
                    backgroundColor: 'rgba(0, 119, 204, 0.8)',
                }]
        }, {
            type: 'line', 
            datasets: [{
                    label: 'Set 2',
                    data: values1,
                    backgroundColor: 'rgba(0,119, 208, 0.8)',
            }]
        }
        options: {
            tooltips: { },
            legend: {
                display: false,
                position: 'top',
            },
            scales: { }
        });
<script>

编辑
我继续使用语法，现在我收到

错误

Uncaught SyntaxError: Unexpected number

这是我现在使用的完整语法 - 哪里出错了？我认为这是 JavaScript 中的内容，因为该页面加载了除图表

之外的所有内容

        var ctx = document.getElementById('canvas').getContext('2d');
        var chart = new Chart(ctx, {
        datasets: [{
                    type: 'bar',
                    labels: labelsarr,
                    label: 'Sample 1',
                    backgroundColor: 'rgba(0, 119, 204, 0.8)',
                    data: [ values ]
            }, {
                type: 'line', 
                label: 'Set 2',
                backgroundColor: 'rgba(0,119, 208, 0.8)',
                data: [ values 1 ]
            },
            options: {
                tooltips: {
                    callbacks: {
                        label: function (t, d) {
                            var xLabel = d.datasets[t.datasetIndex].label;
                            var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                            return xLabel + ': ' + yLabel;
                        }
                    }
                },
                legend: {
                    display: false,
                    position: 'top',
                    text: 'Sample 2',
                },
                scales: {
                    yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function (value, index, values) {
                                    if (parseInt(value) >= 1000) {
                                        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    } else {
                                        return '$' + value;
                                    }
                                }
                            }
                        }]
                }
            },
            plugins: [{
                    beforeDraw: function (chart) {
                        var labels = chart.data.labels;
                        labels.forEach(function (e, i) {
                            var bar = chart.data.datasets[0]._meta[0].data[i]._model;
                            var dataPoint = e.split(/\s/)[1];
                            if (dataPoint === '16')
                                bar.backgroundColor = 'orange';
                            else if (dataPoint === '17')
                                bar.backgroundColor = 'blue';
                        });
                    }
                }]
            }
        }]);

Answer 1

第 13 行：数据：[值 1]

values 和 1 之间的 space 不应该存在 - 要么去掉 space 一共，所以你有：

数据：[values1]

或

数据：[值，1]

现在，我不太确定您在哪里定义值，所以我只能提供这些建议。

除此之外，还有其他几个语法错误（例如缺少括号）。这是完整的代码（假设您有一个 Chart 对象）：

var chart = new Chart(ctx, {
   datasets: [{
     type: 'bar',
     labels: labelsarr,
     label: 'Sample 1',
     backgroundColor: 'rgba(0, 119, 204, 0.8)',
     data: [values]
    }, {
     type: 'line', 
     label: 'Set 2',
     backgroundColor: 'rgba(0,119, 208, 0.8)',
     data: [values1]
    }, {
    options: {
     tooltips: {
      callbacks: {
       label: function (t, d) {
        var xLabel = d.datasets[t.datasetIndex].label;
        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
        return xLabel + ': ' + yLabel;
       }
      }
     },
     legend: {
      display: false,
      position: 'top',
      text: 'Sample 2',
     },
     scales: {
      yAxes: [{
        ticks: {
         beginAtZero: true,
         callback: function (value, index, values) {
          if (parseInt(value) >= 1000) {
           return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          } else {
           return '$' + value;
          }
         }
        }
       }]
     }
    },
    plugins: [{
      beforeDraw: function (chart) {
       var labels = chart.data.labels;
       labels.forEach(function (e, i) {
        var bar = chart.data.datasets[0]._meta[0].data[i]._model;
        var dataPoint = e.split(/\s/)[1];
        if (dataPoint === '16')
         bar.backgroundColor = 'orange';
        else if (dataPoint === '17')
         bar.backgroundColor = 'blue';
       });
      }
     }]
    }
   }] 
  );

JavaScript Error - Uncaught SyntaxError: Unexpected number

JavaScript Error - Uncaught SyntaxError: Unexpected number

javascript

jquery

joomla

charts

chart.js