Question

我有一个动态加载的图表在几个浏览器和我的iPhone上工作。但是，当我尝试在iPhone上打开带有phonegap的图表时，画布完全是错误的。

使用Chart JS和Phonegap有任何已知问题吗？

它应该如下所示：

但是使用Phonegap看起来像这样：

HTML：

<div id="temp_graph" style="display:none;">
<h2 id="tmp_label"></h2>
<canvas id="myChart"></canvas>

CSS：

#temp_graph {
margin-top: 5%;
width: 90%;
background-color: #fff;
display: inline-block;
padding: 2%;
box-shadow: 0 0 10px 0 rgba(0, 0, 58, 0.05);
}

JS：

var temp_graph_div = document.getElementById('temp_graph');

var canvas = document.getElementById('myChart'),
    ctx = canvas.getContext('2d'),
    startingData = {
        labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
        datasets: [{
              label: '°C',
              fill: false,
              lineTension: 0.1,
              backgroundColor: "rgba(255, 205, 200,0.4)",
              borderColor: "rgba(255, 205, 200,1)",
              borderCapStyle: 'butt',
              borderDash: [],
              borderDashOffset: 0.0,
              borderJoinStyle: 'miter',
              pointBorderColor: "rgba(75,192,192,1)",
              pointBackgroundColor: "#fff",
              pointBorderWidth: 1,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: "rgba(75,192,192,1)",
              pointHoverBorderColor: "rgba(220,220,220,1)",
              pointHoverBorderWidth: 2,
              pointRadius: 1,
              pointHitRadius: 10,
              responsive: true,
              maintainAspectRatio: true,
              data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
          }]
    };

var myChart = new Chart(ctx, {
    type: 'line',
    data: startingData,
});


temp_graph_div.style.display = 'inherit';

有什么想法吗？

编辑：为画布添加了边框，并通过浏览器打开了网站（safari ios）

为画布添加了边框，并通过phonegap打开了网站

似乎宽度不正确，但为什么同一个移动设备有不同的宽度？

Answer 1

我可以解决这个问题=）问题是由设置div

引起的

temp_graph_div.style.display = 'inherit';

创建图表后

。

现在，我的代码看起来像这样（没有大的改变，但取得了巨大的成功）：

        var temp_graph_div = document.getElementById('temp_graph');
    temp_graph_div.style.display = 'inherit';

    var canvas = document.getElementById('myChart'),
        ctx = canvas.getContext('2d'),
        startingData = {
            labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
            datasets: [{
                  label: '°C',
                  fill: false,
                  lineTension: 0.1,
                  backgroundColor: "rgba(255, 205, 200,0.4)",
                  borderColor: "rgba(255, 205, 200,1)",
                  borderCapStyle: 'butt',
                  borderDash: [],
                  borderDashOffset: 0.0,
                  borderJoinStyle: 'miter',
                  pointBorderColor: "rgba(75,192,192,1)",
                  pointBackgroundColor: "#fff",
                  pointBorderWidth: 1,
                  pointHoverRadius: 5,
                  pointHoverBackgroundColor: "rgba(75,192,192,1)",
                  pointHoverBorderColor: "rgba(220,220,220,1)",
                  pointHoverBorderWidth: 2,
                  pointRadius: 1,
                  pointHitRadius: 10,
                  responsive: true,
                  maintainAspectRatio: true,
                  data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
              }]
        };


    var myChart = new Chart(ctx, {
        type: 'line',
        data: startingData,
    });

Chart JS无法使用Phonegap

1 个答案: