Question

我在从Bar =>线和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

这是我的配置，您可以单击按钮查看问题。我一直在仔细研究所有内容，以在线找到解决方案，但找不到任何东西。我在这里做什么错了？

从Bar开始，更改为Line。（线从错误的位置开始）
https://jsfiddle.net/30gkjb5z/2

从Line开始，更改为Bar。（酒吧被切断）
https://jsfiddle.net/qoyr1m6v/

Answer 1

您无需销毁图表并创建图表，只需在同一画布上使用所需的选项bar或line

创建另一个图表即可。

从bar到line：

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>

从line到bar：

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>

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

1 个答案: