ハイチャートのグラフ

-1

ハイチャートでダイナミックなグラフを作成しようとしています。 Hicharts Webサイトで提供されているサンプルを使用していますが、動作しません。ハイチャートのグラフ

コードは次のとおり

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script src="highcharts/js/highcharts.js"></script> 
<script src="highcharts/js/modules/data.js"></script> 
<script src="highcharts/js/modules/exporting.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<!-- Additional files for the Highslide popup effect --> 
<script src="highcharts/highslide-full.min.js"></script> 
<script src="highcharts/highslide.config.js" charset="utf-8"></script> 

<script type="text/javascript"> 
$(function() { 

    // Get the CSV and create the chart 
    $.get("data/regperop_tmp_2.php", function (csv) { 
     console.log(csv); 
     $('#container').highcharts({ 

      data: { 
       csv: csv, 
       dateFormat: 'YYYY-mm-dd' 
       }, 
      title: {text: 'TITLE'}, 
      subtitle: {text: 'Subtitle'}, 

      xAxis: { 
       tickInterval: 7 * 24 * 3600 * 1000, // one week 
       tickWidth: 0, 
       gridLineWidth: 1, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: -3 
       } 
      }, 

      yAxis: [{ // left y axis 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: 16, 
        format: '{value:.,0f}' 
       }, 
       showFirstLabel: false 
      }, { // right y axis 
       linkedTo: 0, 
       gridLineWidth: 0, 
       opposite: true, 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'right', 
        x: -3, 
        y: 16, 
        format: '{value:.,0f}' 
       }, 
       showFirstLabel: false 
      }], 

      legend: { 
       align: 'left', 
       verticalAlign: 'top', 
       y: 20, 
       floating: true, 
       borderWidth: 0 
      }, 

      tooltip: { 
       shared: true, 
       crosshairs: true 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function (e) { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: e.pageX || e.clientX, 
             y: e.pageY || e.clientY 
            }, 
            headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + 
             this.y + ' visits', 
            width: 200 
           }); 
          } 
         } 
        }, 
        marker: { 
         lineWidth: 1 
        } 
       } 
      }, 

      series: [{ 
       name: 'All visits', 
       lineWidth: 4, 
       marker: { 
        radius: 4 
       } 
      }, { 
       name: 'New registration' 
      }] 
     }); 
    }); 

}); 
</script> 

</head> 
<body> 
<div id="container" align="center" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</body> 
</html>

CSVデータは、PHPスクリプトによって提供されます。私はデータの形式を確認するためにはconsole.log（CSV）を入れて、結果は次のとおりです。

Data, OP1, OP2, OP3, OP4 
2016-10-19, 6645, 10381, 0, 4069 
2016-10-20, 6222, 10097, 0, 3905 
2016-10-21, 6440, 10076, 0, 3784 
2016-10-22, 6696, 10495, 0, 3860 
2016-10-23, 6820, 10464, 1, 3890

コードが

出典

2016-10-23 Giorgio Torassa

jQueryはHighchartsライブラリの前にロードする必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script>

例：https://jsfiddle.net/ocmm5581/

出典

2016-10-24 11:49:33 morganfree

おかげで、変化しません！ –

にスペースを削除するに動作していない理由を私は理解できませんあなたのCSVは、（/ CSVを貼り付けそのままコピーしたと仮定すると）：

Data,OP1,OP2,OP3,OP4 
2016-10-19,6645,10381,0,4069 
2016-10-20,6222,10097,0,3905 
2016-10-21,6440,10076,0,3784 
2016-10-22,6696,10495,0,3860 
2016-10-23,6820,10464,1,3890

をRFC 4180によると：

SPAC esはフィールドの一部とみなされ、無視してはいけません。

出典

2016-10-23 14:24:28

私はスペースを削除したが、何も、今では働いて –

ハイチャートのグラフ

答えて

関連する問題