javascript - ChartJS，更新图表类型无法正确更新 xAxis

Question

我在更新 Bar => Line 和 Line => Bar 的图表类型时遇到问题。 xAxis 未正确更新刻度的开始/结束位置，导致图表在左/右相反方向被切断(见下图)

我正在使用此代码来更新图表类型。它获取旧配置，销毁旧图表，从旧配置创建新图表。

var myChart = window.myChart;
myChart.config.type = 'bar';
var ctx = document.getElementById("myChart");
var cfg = Object.create(myChart.config);
myChart.destroy();
window.myChart = new Chart(ctx, cfg);

在此示例中，我将初始图表创建为条形图。然后我将其更改为折线图，但折线图现在不再从左侧开始。

(抱歉没有链接，由于信誉问题无法上传图片)

https://user-images.githubusercontent.com/49397342/55719410-2a562580-59cc-11e9-8a1e-f03417a24f8d.png

https://user-images.githubusercontent.com/49397342/55719420-2de9ac80-59cc-11e9-92ec-eeb9dcaf8181.png

当我从折线图开始时，会发生相反的情况。最初的折线图没问题，但条形图现在被切断了。

https://user-images.githubusercontent.com/49397342/55719740-f9c2bb80-59cc-11e9-8a0c-efdadc1afdd3.png

https://user-images.githubusercontent.com/49397342/55719742-fb8c7f00-59cc-11e9-9782-56a6cc982de6.png

这是我的配置，您可以点击按钮查看问题。我一直在网上挖掘所有内容以寻找解决方案，但找不到任何东西。我在这里做错了什么？

从条形开始，更改为线形。 (线开始位置错误)
https://jsfiddle.net/30gkjb5z/2

从线条开始，更改为条形。 (酒吧被切断)
https://jsfiddle.net/qoyr1m6v/

Answer 1

您无需销毁图表并创建一个图表，只需在同一 Canvas 上使用所需选项条形或线创建另一个图表

从条到线:

var dataset = {
  "labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
  "datasets": [{
      "label": "Impressions",
      "data": [
        76422672,
        686284176,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(54, 162, 235, 0.3)",
      "borderColor": "rgba(54, 162, 235, 1)",
      "borderWidth": 1,
      "yAxisID": "impressions"
    },
    {
      "label": "Actions",
      "data": [
        18,
        198,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(255, 159, 64, 0.3)",
      "borderColor": "rgba(255, 159, 64, 1)",
      "borderWidth": 1,
      "yAxisID": "actions"
    }
  ]
};

var options = {
  "title": {
    "display": true,
    "text": "My Chart"
  },
  "maintainAspectRatio": false,
  "responsive": true,
  "scales": {
    "yAxes": [{
        "scaleLabel": {
          "display": true,
          "labelString": "Impressions",
          "fontStyle": "bold"
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "left",
        "id": "impressions"
      },
      {
        "scaleLabel": {
          "display": true,
          "labelString": "Actions",
          "fontStyle": "bold"
        },
        "gridLines": {
          "display": false,
          "offsetGridLines": true
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "right",
        "id": "actions"
      }
    ],
    "xAxes": [{
      "ticks": {
        "display": true,
        "beginAtZero": true
      },
      "scaleLabel": {
        "display": true,
        "labelString": "Day",
        "fontStyle": "bold"
      },
      "gridLines": {
        "color": "rgba(172, 172, 172, 0.30)",
        "offsetGridLines": true
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
  type: 'line',
  data: dataset,
  options: options
});

var button = document.getElementById("changeChartType");
button.addEventListener("click", function() {
  // here is your trick, change the type to 'bar' with same other options;
  window.myChart = new Chart(ctx, {
    type: 'bar',
    data: dataset,
    options: options
  });
});

.myChartContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.myChartContainer canvas {
  position: relative;
  max-width: 800px;
  max-height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="myChartContainer">
  <canvas id="myChart" style="min-height: 300px"></canvas>
</div>
<button id="changeChartType">
Change Chart Type
</button>

从行到条:

var dataset = {
  "labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
  "datasets": [{
      "label": "Impressions",
      "data": [
        76422672,
        686284176,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(54, 162, 235, 0.3)",
      "borderColor": "rgba(54, 162, 235, 1)",
      "borderWidth": 1,
      "yAxisID": "impressions"
    },
    {
      "label": "Actions",
      "data": [
        18,
        198,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "backgroundColor": "rgba(255, 159, 64, 0.3)",
      "borderColor": "rgba(255, 159, 64, 1)",
      "borderWidth": 1,
      "yAxisID": "actions"
    }
  ]
};

var options = {
  "title": {
    "display": true,
    "text": "My Chart"
  },
  "maintainAspectRatio": false,
  "responsive": true,
  "scales": {
    "yAxes": [{
        "scaleLabel": {
          "display": true,
          "labelString": "Impressions",
          "fontStyle": "bold"
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "left",
        "id": "impressions"
      },
      {
        "scaleLabel": {
          "display": true,
          "labelString": "Actions",
          "fontStyle": "bold"
        },
        "gridLines": {
          "display": false,
          "offsetGridLines": true
        },
        "ticks": {
          "beginAtZero": true
        },
        "position": "right",
        "id": "actions"
      }
    ],
    "xAxes": [{
      "ticks": {
        "display": true,
        "beginAtZero": true
      },
      "scaleLabel": {
        "display": true,
        "labelString": "Day",
        "fontStyle": "bold"
      },
      "gridLines": {
        "color": "rgba(172, 172, 172, 0.30)",
        "offsetGridLines": true
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
  type: 'bar',
  data: dataset,
  options: options
});

var button = document.getElementById("changeChartType");
button.addEventListener("click", function() {
  // and here, change to type: 'line' 
  window.myChart = new Chart(ctx, {
    type: 'line',
    data: dataset,
    options: options
  });
});

.myChartContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.myChartContainer canvas {
  position: relative;
  max-width: 800px;
  max-height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="myChartContainer">
  <canvas id="myChart" style="min-height: 300px"></canvas>
</div>
<button id="changeChartType">
Change Chart Type
</button>