2

プロジェクトにhtml、css、およびjavascriptを使用しています。サーバーは、ノード、エクスプレス、およびハイチャートを含めてローカルにセットアップされます。

私のhtmlには、ハイチャート関数で参照しているdivコンテナがあります。ハイチャートで使用しているデータは、csv ファイルから取得されます。データを配列に解析する単純な getData 関数を作成しました。また、highcharts 関数の上部では、await getData を使用しているため、データを取得した後にのみグラフをレンダリングできます。すべての関数は非同期です。その 1 ページには 7 つのグラフがあり、すべて以下の構文を使用して作成され、それぞれに独自の getData 関数と div コンテナーがあります。

2 つの問題:

問題 1: ページを更新するまでグラフが表示されず、すべてのグラフが一度に (20 回程度) 表示されるまで、何度も更新する必要があります。関数はすべて実行されています。コンソールで確認しました。

問題 2: Web サイトに複数のページを配置したいので、これを動的に記述したいと思います。それぞれが独自の csv ファイルを使用していますが、基本的には同じコードです。

*編集：

時々、コンソールに「エラー: Highcharts エラー #13: www.highcharts.com/errors/13/」が表示されますが、更新を続けると、参照している行/js が変更されます。それは常に highcharts 関数の一部であり、その中で container を指定しHighcharts.chart('hammerchart', {ます。このエラーを確認しましたが、基本的には、スクリプトが #id のコンテナーを見つけられないということです。「DOMContentLoaded」を使用しているとはわかりません。代わりに「ロード」イベントを試してみたところ、エラー #13 は解決されましたが、エラー メッセージが表示されずにチャートがまったく表示されませんでした。

*編集2：

今まで、自分のウェブサイトを表示するのに Firefox しか使っていませんでした。Chromeもチェックしましたが、ここにはエラーメッセージはありませんが、グラフもまったく表示されません。

誰かがここで私を助けてくれたら、私は本当に幸せです.何日もこれを修正しようとして成功しませんでした. また、私のデータの取り扱いに関する提案も受け付けています。よろしくお願いします！

コード：

CSVデータサンプル

2015,2.5,7.2,1.6,6.5,2.2
2016,3.5,7.6,2.6,9.3,1.2
2017,2.5,7.2,1.6,6.5,2.2
2018,3.5,7.6,2.6,9.3,1.2
2019,2.5,7.2,1.6,6.5,2.2

HTML

   <div id="hammerchart">
   </div>

CSS

#hammerchart{
    width:49%;
    height: 500px;
    margin:0.5%;
    margin-top:50px;
    flex: 1 1 600px;
}

Javascript - 最初に配列を宣言し、次に解析関数を使用して、csv を改行とコンマで分割します。次に、parseFloat() を使用しているため、文字列が含まれていません。highcharts 関数では、await getData と DOMContentloaded を使用して、html とデータの両方の準備が整っていることを確認しています。

const years = [];
const columntwos = [];
const columnthrees = [];
const columnfours = [];
const columnfives = [];
const columnsixs = [];


async function getDataone() {
    const response = await fetch('/javascripts/hammerchart.CSV');
    const data = await response.text();

    const table = data.split('\n');
    table.forEach(row => {
        const columns = row.split(',');
        const year = columns[0];
        years.push(year);
        const columntwo = columns[1];
        columntwos.push(parseFloat(columntwo));
        const columnthree = columns[2];
        columnthrees.push(parseFloat(columnthree));
        const columnfour = columns[3];
        columnfours.push(parseFloat(columnfour));
        const columnfive = columns[4];
        columnfives.push(parseFloat(columnfive));
        const columnsix = columns[5];
        columnsixs.push(parseFloat(columnsix));
    });
};


async function hammerchart() {
    await getDataone();
    document.addEventListener('DOMContentLoaded', () => {
        Highcharts.chart('hammerchart', {
          chart: {
            zoomType: 'xy'
          },
          title: {
            text: 'Data'
          },
          subtitle: {
            text: ''
          },
          credits: {
            text: 'highcharts',
          },
          xAxis: [{
            categories: years,
            plotBands: [{ // visualize
                from: 4.5,
                to: 6,
                color: 'rgba(68, 170, 213, .2)'
            }],
            crosshair: true
          }],
          yAxis: [{ // Primary yAxis
            labels: {
              format: '{value}$',
              style: {
                color: Highcharts.getOptions().colors[1]
              }
            },
            title: {
              text: 'Amount in $',
              style: {
                color: Highcharts.getOptions().colors[1]
              }
            }
          }, { // Secondary yAxis
            title: {
              text: 'Ratio in %',
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },
            labels: {
              format: '{value} %',
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },
            opposite: true
          }],
          tooltip: {
            shared: true
          },
          legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor:
              Highcharts.defaultOptions.legend.backgroundColor || // theme
              'rgba(255,255,255,0.25)'
          },
          series: [{
            name: 'columntwo',
            type: 'areaspline',
            data: columntwos,
            tooltip: {
              valueSuffix: '$'
            }
          }, {
            name: 'columnthree',
            type: 'areaspline',
            data: columnthrees,
            tooltip: {
              valueSuffix: '$'
            }
          }, {
            name: 'columnfour',
            type: 'areaspline',
            data: columnfours,
            tooltip: {
              valueSuffix: '$'
            }
          }, {
            name: 'columnfive',
            type: 'column',
            data: columnfives,
            tooltip: {
              valueSuffix: '$'
            }
          }, {
            name: 'columnsix',
            type: 'spline',
            yAxis: 1,
            data: columnsixs,
            tooltip: {
              valueSuffix: '%'
            }
          }]
        }); 
    }); 
};


hammerchart();
4

0 に答える 0