Javascript 错误:无法创建图表:can';t从给定项获取上下文

Javascript 错误:无法创建图表:can';t从给定项获取上下文,javascript,chart.js,Javascript,Chart.js,因此,我下载了一个引导模板,并尝试使用js更改图表的数据: 因此,html: <div id="chart-combinedd"></div> 但我在控制台中看到这个错误: 未能创建图表:无法从给定项获取上下文 图表中没有显示任何数据。 main.js文件中模板的原始javascript代码: h = { chart: { height: 397,

因此,我下载了一个引导模板,并尝试使用js更改图表的数据: 因此,html:

<div id="chart-combinedd"></div>
但我在控制台中看到这个错误:

未能创建图表:无法从给定项获取上下文

图表中没有显示任何数据。 main.js文件中模板的原始javascript代码:

h = {
                    chart: {
                        height: 397,
                        type: "line",
                        toolbar: {
                            show: !1
                        }
                    },
                    series: [{
                        name: "Website Blog",
                        type: "column",
                        data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
                    }, {
                        name: "Social Media",
                        type: "line",
                        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
                    }],
                    stroke: {
                        width: [0, 4]
                    },
                    labels: ["01 Jan 2001", "02 Jan 2001", "03 Jan 2001", "04 Jan 2001", "05 Jan 2001", "06 Jan 2001", "07 Jan 2001", "08 Jan 2001", "09 Jan 2001", "10 Jan 2001", "11 Jan 2001", "12 Jan 2001"],
                    xaxis: {
                        type: "datetime"
                    },
                    yaxis: [{
                        title: {
                            text: "Website Blog"
                        }
                    }, {
                        opposite: !0,
                        title: {
                            text: "Social Media"
                        }
                    }]
                },
            p = new n.a(document.querySelector("#chart-combined"), h),

我使用的模板:

根据您提到的模板和图表语法,您似乎使用的是“ApexCharts”图表。虽然我看不出该模板使用的是哪个版本,但我对您的代码进行了以下更改以复制该模板:

  • 此处包含最新的ApexCharts库CDN:
  • 从GetElementById中删除了“#”
  • 重命名了对ApexCharts()的Chart()调用(此命名可能特定于模板,因此您可能不需要执行此操作)
  • 调用myChart.render();最后
您可以看到它在这里工作:


根据您提到的模板和图表语法,您似乎正在使用“ApexCharts”图表。虽然我看不出该模板使用的是哪个版本,但我对您的代码进行了以下更改以复制该模板:

  • 此处包含最新的ApexCharts库CDN:
  • 从GetElementById中删除了“#”
  • 重命名了对ApexCharts()的Chart()调用(此命名可能特定于模板,因此您可能不需要执行此操作)
  • 调用myChart.render();最后
您可以看到它在这里工作:


您的语法看起来像highcharts.js,而不是chart.js。你确定你使用的是正确的库吗?@gus我已经添加了原始的javascript代码,看一看,除非你为图表提供模板引用的确切库/版本,否则很难真正确定。我看到的一个明显错误是getElementById(“chart combinedd”)。它不应该有一个#。它应该是getElementById(“chart combinedd”)。也许这就是你需要解决的所有问题。@gus我已经解决了这个问题,但仍然是同一个问题,我也不确定确切的库,这是我使用的模板:问题与Highcharts库无关。你的语法看起来像Highcharts.js,而不是chart.js。你确定你使用的是正确的库吗?@gus我已经添加了原始的javascript代码,看一看,除非你为图表提供模板引用的确切库/版本,否则很难真正确定。我看到的一个明显错误是getElementById(“chart combinedd”)。它不应该有一个#。它应该是getElementById(“chart combinedd”)。也许这就是你需要解决的所有问题。@gus我已经解决了,但仍然是同一个问题,我也不确定确切的库,这是我使用的模板:问题与Highcharts库无关。
h = {
                    chart: {
                        height: 397,
                        type: "line",
                        toolbar: {
                            show: !1
                        }
                    },
                    series: [{
                        name: "Website Blog",
                        type: "column",
                        data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
                    }, {
                        name: "Social Media",
                        type: "line",
                        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
                    }],
                    stroke: {
                        width: [0, 4]
                    },
                    labels: ["01 Jan 2001", "02 Jan 2001", "03 Jan 2001", "04 Jan 2001", "05 Jan 2001", "06 Jan 2001", "07 Jan 2001", "08 Jan 2001", "09 Jan 2001", "10 Jan 2001", "11 Jan 2001", "12 Jan 2001"],
                    xaxis: {
                        type: "datetime"
                    },
                    yaxis: [{
                        title: {
                            text: "Website Blog"
                        }
                    }, {
                        opposite: !0,
                        title: {
                            text: "Social Media"
                        }
                    }]
                },
            p = new n.a(document.querySelector("#chart-combined"), h),
var ctx = document.getElementById("chart-combinedd");
var myChart = new ApexCharts(ctx, {
                    chart: {
                        height: 397,
                        type: "line",
                        toolbar: {
                            show: !1
                        }
                    },
                    series: [{
                        name: "Website Blog",
                        type: "column",
                        data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
                    }, {
                        name: "Social Media",
                        type: "line",
                        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
                    }],
                    stroke: {
                        width: [0, 4]
                    },
                    labels: ["01 Jan 2001", "02 Jan 2001", "03 Jan 2001", "04 Jan 2001", "05 Jan 2001", "06 Jan 2001", "07 Jan 2001", "08 Jan 2001", "09 Jan 2001", "10 Jan 2001", "11 Jan 2001", "12 Jan 2001"],
                    xaxis: {
                        type: "datetime"
                    },
                    yaxis: [{
                        title: {
                            text: "Website Blog"
                        }
                    }, {
                        opposite: !0,
                        title: {
                            text: "Social Media"
                        }
                    }]
                });
myChart.render();