Apexcharts - 在 jsfiddle 中运行 - 但不是我的电脑

如何解决Apexcharts - 在 jsfiddle 中运行 - 但不是我的电脑

我想更新图表。
https://jsfiddle.net/q2hLgk9z/2/
最初的想法来自这里：https://jsfiddle.net/wxzpk9dn/2/

<head>
   <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.18.1/dist/apexcharts.min.js"></script>
</head>

<div>
      <input type="radio" id="columnGraph" name="graph" value="line" />
      <label for="columnGraph">Line</label>
</div>
<div>
      <input type="radio" id="bargraph" name="graph" value="line1" checked />
      <label for="bargraph">Barra</label>
</div>

<div id="chartwind" ></div> </pre>

和脚本

  <script>
      // CHART OPTIONS by chart type
      let chartOptions = {
        line1: {
          chart: { type: "line" },series: [
            { name: "One",type: "line",data: [15,20] },{ name: "Two",data: [30,25] },],labels: ["2017","2018"],stroke: { width: 2 },},line: {
          chart: { type: "line" },series: [
            { name: "2017",data: [65,{ name: "2018",labels: ["from","to"],stroke: { width: 5 },};
    //select the radiobuttons
   var chartTypeControlButtons = document.querySelectorAll(
       'input[type=radio][name="graphicType"]'
    ),chartTypeControlButtonInitChecked = document.querySelectorAll(
        'input[type=radio][name="graphicType"]:checked'
    );
   // Chart type changing (HANDLER)
   //switch between the graphs
      function changeHandler(event) {
        let selectedChartType = this.value,updatedChartOptions = chartOptions[selectedChartType];
        chart.updateOptions(updatedChartOptions);
      }
      //Listener for the radios
      Array.prototype.forEach.call(chartTypeControlButtons,function (radio) {
        radio.addEventListener("change",changeHandler);
      });
      // Render the chart with initial options and then
      let initialChartType = chartTypeControlButtonInitChecked[0].value,// think of it as a preparing the ground
        // USE 'bar' as the type. If you choose 'pie' ... you will get glithes
        initialChartOptions = {
          chart: {
            width: 350,series: [],};

      // Create chart with init options
      // Note that the link to the chart object is in the GLOBAL scope
      var chart = new ApexCharts(
        document.getElementById("chartwind"),initialChartOptions
      );
      chart.render(); // Firstly,prepare the ground
      chart.updateOptions(chartOptions[initialChartType]); // Secondly,draw we want
    </script>

    <div id="chartwind"></div>
  </body>

在 Jsfiddle 中它可以工作，但不能在我的电脑上运行。
我将 apexchartversion 加载为 fiddle (3.18.1) - 但这并不重要。^最新版本也存在同样的问题。

我收到 2 条错误消息：
在开始时：在 chart.render:Uncaught (in promise) 之后错误：找不到元素（可能是因为系列是 []。但它不会随值改变。
然后在更新模式： Uncaught TypeError: Cannot read property 'filter' of undefined

你有什么想法，我可以在我的机器上尝试什么？（我在不同的浏览器上有同样的问题）。
也许您对小提琴的区别有所了解？

解决方法

只需在 <div id="chartwind"></div> 后定义脚本文件路径。它会起作用。

示例：

index.html

<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.18.1/dist/apexcharts.min.js"></script>
</head>

<div>
      <input type="radio" id="columnGraph" name="graph" value="line" />
      <label for="columnGraph">Line</label>
    </div>
    <div>
      <input type="radio" id="barGraph" name="graph" value="line1" checked />
      <label for="barGraph">Barra</label>
    </div>

<div id="chartwind" ></div>
<script src="./apex.js"></script>

apex.js

let chartOptions = {
  line1: {
    chart: {
      type: "line"
    },series: [{
        name: "One",type: "line",data: [15,20]
      },{
        name: "Two",data: [30,25]
      },],labels: ["2017","2018"],stroke: {
      width: 2
    },},line: {
    chart: {
      type: "line"
    },series: [{
        name: "2017",data: [65,{
        name: "2018",labels: ["from","to"],stroke: {
      width: 5
    },};

var chartTypeControlButtons = document.querySelectorAll(
    'input[type=radio][name="graph"]'
  ),chartTypeControlButtonInitChecked = document.querySelectorAll(
    'input[type=radio][name="graph"]:checked'
  );
//console.log("checked",chartTypeControlButtonInitChecked.length);
//console.log("radios",chartTypeControlButtons.length);

function changeHandler(event) {
  let selectedChartType = this.value,updatedChartOptions = chartOptions[selectedChartType];
  //console.log("change");
  chart.updateOptions(updatedChartOptions);
}

Array.prototype.forEach.call(chartTypeControlButtons,function(radio) {
  radio.addEventListener("change",changeHandler);
});
// Render the chart with initial options and then
// you can update it with ANY wished options
//  let initialChartType = $(chartTypeControlButtonInitChecked).val(),//console.log("text",chartTypeControlButtonInitChecked[0].value);
let initialChartType = chartTypeControlButtonInitChecked[0].value,// think of it as a preparing the ground
  // USE 'bar' as the type. If you choose 'pie' ... you will get glithes
  initialChartOptions = {
    chart: {
      width: 350,series: [],};

// Create chart with init options
// Note that the link to the chart object is in the GLOBAL scope
var chart = new ApexCharts(
  document.getElementById("chartwind"),initialChartOptions
);
//console.log("initialChartType",initialChartType);
chart.render(); // Firstly,prepare the ground
//console.log(chartOptions[initialChartType]);
chart.updateOptions(chartOptions[initialChartType]); // Secondly,draw we want
// chart.updateOptions(newOptions); Redraw we want

Apexcharts - 在 jsfiddle 中运行 - 但不是我的电脑

如何解决Apexcharts - 在 jsfiddle 中运行 - 但不是我的电脑

解决方法

相关推荐