chart.jsでグラフを表示してマウスオーバーすると異なるグラフが表示されてたことの対応

2018.09.05 Wednesday 20:54
0
    chart.jsでグラフを表示してマウスオーバーすると異なるグラフが表示されてたことの対応


    chart.jsでグラフを表示してマウスオーバーすると
    何やら、グラフ拡大してるんだか初期表示のグラフ表示するんだか
    最大最小が異なってるのか、とにかく異なるグラフが表示されてた

    調べると、マウスオーバするたびに前回のグラフが表示されてたみたい。

    これの対応だけど
    canvasを再利用するたびにグラフのインスタンスを破棄すればでなくなったよ!

    -----------------------------------------------------------------

    var hogechart=null;

    function drawChart(objChart,data){
    if( hogechart ){
    hogechart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    hogechart = new Chart(ctx).Pie(data, {animateScale: true});
    }

    -----------------------------------------------------------------

    どうでもいいけど、hover という単語にいまいちなれない・・・

    category:javascript | by:ittoocomments(0)trackbacks(0) | -

    chart.jsで非同期でデータを取得し表示する際に参考になったもの

    2018.09.04 Tuesday 00:05
    0
      chart.jsで非同期でデータを取得し表示する際に参考になったもの

      $.getJSON("json取得するurl", function(data) {

      // 件数が複数ある場合はここでループまわしてラベルとデータを取得
      var labels = data.customers[0].amounts.map(function(e) {
      return e[0];
      });
      var data = data.customers[0].amounts.map(function(e) {
      return e[1];
      });

      var ctx = document.getElementById('myChart').getContext('2d');
      var chart = new Chart(ctx, {
      type: 'line',
      data: {
      labels: labels,
      datasets: [{
      backgroundColor: 'rgb(129, 198, 2228)',
      borderColor: 'rgb(0, 150, 215)',
      data: data
      }]
      },
      options: {
      responsive: 'true',
      }
      });
      });
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
      <canvas id="myChart"></canvas>

      category:javascript | by:ittoocomments(0)trackbacks(0) | -

      chart.jsでphpから値うけとってグラフ描画するメモ

      2018.09.02 Sunday 16:56
      0
        phpからのデータ取得時はどっちでも可
        var array_data = <?php echo json_encode($array_data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
        var array_data = <?php echo "[" . implode($array_data,",") . "]" ?>;


        <?php
        $array_data = [993,8,1,955,77,99,3];
        ?>
        var array_label = ["aaa1","aaa2","aa31","aaa4","aaa5","aaa6","aaa7"];
        var array_data = <?php echo json_encode($array_data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
        //var array_data = <?php echo "[" . implode($array_data,",") . "]" ?>;

        var areaChartData = {
        labels : array_label,
        datasets: [
        {
        label : 'Electronics',
        fillColor : 'rgba(210, 214, 222, 1)',
        strokeColor : 'rgba(210, 214, 222, 1)',
        pointColor : 'rgba(210, 214, 222, 1)',
        pointStrokeColor : '#c1c7d1',
        pointHighlightFill : '#fff',
        pointHighlightStroke: 'rgba(220,220,220,1)',
        data : array_data
        },
        {
        label : 'Digital Goods',
        fillColor : 'rgba(60,141,188,0.9)',
        strokeColor : 'rgba(60,141,188,0.8)',
        pointColor : '#3b8bba',
        pointStrokeColor : 'rgba(60,141,188,1)',
        pointHighlightFill : '#fff',
        pointHighlightStroke: 'rgba(60,141,188,1)',
        data : [28, 48, 40, 19, 86, 27, 90]
        }
        category:javascript | by:ittoocomments(0)trackbacks(0) | -

        jsonpをつかって異なるドメインにjsonなげて保存した

        2017.10.28 Saturday 21:22
        0
          クロスドメイン問題は jsonpで解決した
          javascript で指定する受信側の phpファイル内に
          header('Content-Type: application/javascript');
          を記載した

          なげるjquery側では
          $.getJSON("http://xxx/xxx_save.php?callback=?",
          {
          json: r_json
          }
          );
          とした
          この2点のみだった

          Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
          Uncaught SyntaxError: Unexpected token : for a cross domain json ...
          category:javascript | by:ittoocomments(0)trackbacks(0) | -

          javascript で json送ろうとしたらエラー

          2017.10.27 Friday 07:53
          0
            javascript で json送ろうとしたら以下のエラー

            No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

            category:javascript | by:ittoocomments(0)trackbacks(0) | -

            ad
            Calender
                  1
            2345678
            9101112131415
            16171819202122
            23242526272829
            30      
            << September 2018 >>
            Selected entry
            PR
            Category
            Archives
            Recent comment
            • 円マークが自動変換されてる
              aaaaaa
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              66hills
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              ssd
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              max
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • コンピュータ業界の根本的な変化
              cloud
            • コンピュータ業界の根本的な変化
              Dellの仮想化
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              えちごや
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              touch
            Recent trackback
            • スマートフォンの法人活用例
              無線LANネットのブログ
            • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
              特選情報
            Recommend
            Link
            Profile
            Search
            Others
            Mobile
            qrcode
            Powered
            無料ブログ作成サービス JUGEM