Question

在我的php中，我正在运行两个不同的Select语句并将它们传递给我的JQuery数组value和value1我已经验证每个数组都以正确的格式保存数据，但我的问题是我的图表从未创建过。我所追求的是Set 1是一个条形，Set 2是一条显示与Set 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>

修改
我继续使用语法，现在我得到

的错误

未捕获的SyntaxError：意外的数字

这是我现在正在使用的完整语法 - 什么是错误的？我认为它是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]

值和 1 之间的空格不应该存在 - 要么完全摆脱空间，要么：

数据：[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错误 - 未捕获的SyntaxError：意外的数字

1 个答案: