Question

当我将网站打开为移动格式时，我遇到了一个问题。

默认我的图表是这样的

当我进入移动设备时，我的图表就像这样

所以我想知道当我的宽度为＆lt;时，如何禁用图例。 468px。

我无法使用样式和媒体查询导致它的画布。

我的代码HTML：

 <canvas  id="ca" width="300" height="200"></canvas>

脚本：

    <script>
    var ctx = document.getElementById("ca");
    var clients = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($annee_s2mi) ?>,
            datasets: [
            {
                label: "Chiffre d'affaire S2MI",
                data: <?php echo json_encode($montant_s2mi) ?>,
                backgroundColor: "rgba(255,87,87,0.4)",
                hoverBackgroundColor: "rgba(255,87,87,1)",
            },
            {
            label: "Chiffre d'affaire JBM41",
                data: <?php echo json_encode($montant_jbm41) ?>,
                backgroundColor: "rgba(232,208,75,0.4)",
                hoverBackgroundColor: "rgba(232,208,75,1)",
            },
            {
            label: "Chiffre d'affaire ENTI",
                data: <?php echo json_encode($montant_enti) ?>,
                backgroundColor: "rgba(160,206,95,0.4)",
                hoverBackgroundColor: "rgba(160,206,95,1)",
            },
            {
            label: "Chiffre d'affaire APRIME",
                data: <?php echo json_encode($montant_aprime) ?>,
                backgroundColor: "rgba(152,0,42,0.4)",
                hoverBackgroundColor: "rgba(152,0,42,1)",
            },
            {
            label: "Chiffre d'affaire du Groupe",
                data: <?php echo json_encode($montant_groupe) ?>,
                backgroundColor: "rgba(41,39,56,0.4)",
                hoverBackgroundColor: "rgba(41,39,56,1)",
            }
            ]
        },
        options: {
            tooltips: {
                callbacks: {
                  label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                    return datasetLabel + ' : ' + tooltipItem.yLabel + ' €';
                  }
                }
            },
                scales: {
                    yAxes: [{
                      scaleLabel: {
                        display: true,
                        labelString: 'En Euro (€)'
                      }
                    }]
                },
        }
    });
</script>

感谢您的帮助！

Answer 1

你可以尝试这样的事情：

if ($(window).width() < 500) {
  $(".doughnut-legend").hide();
} else {
  $(".doughnut-legend").show();
}
$(window).resize(function(e) {
  if ($(this).width() < 500) {
    $(".doughnut-legend").hide();
  } else {
    $(".doughnut-legend").show();
  }
});

http://jsfiddle.net/Tintin37/k568zvcr/

修改

您可以将图例生成为Html，并使用生成的div进行播放。它不完美，我会尝试找到隐藏图例的更好方法

http://jsfiddle.net/Tintin37/5eLtdzck/

<强> EDIT2

就像那样看起来不错：

http://jsfiddle.net/Tintin37/b9w2r01m/

当width＆lt;时，禁用图例charts.js XXX px

1 个答案: