javascript - highcharts.js カスタム チャートの実装

Question

JS を使用してこのような単純なグラフを実装する必要がありますhttp://i.stack.imgur.com/6gusX.png highcharts.js lib を確認しましたが、すぐに使用できるソリューションや類似のグラフが見つかりませんでした。誰かがそれを実装するのに役立つツールを知っているなら、助けてください。

Answer 1

Highchartsを使用して実行できます。

マーカーをフォーマットするには、次のコードを使用します。

plotOptions: {
    // means all series types, you can change it according to the serie type
    series: {
        marker: {
            radius: 8,
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: null
        }
    }
}

デモ リファレンス

次に、マーカー内にポイント値を追加します。
例として、前のコードを使用します。
デフォルトでdataLabelsは無効になっているためenable、位置を設定する必要がありますy。

plotOptions: {
    // means all series types, you can change it according to the serie type
    series: {
        marker: {
            radius: 12,
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: null
        },
        dataLabels: {
            enabled: true,
            y: 13,
            // default formatter
            formatter: function() {
                return this.y;
            }
        }
    }
}

半径の値を変更したのは、数値を入れるには小さすぎるため、数値formatterをフォーマットするために使用できます。
デモ

次に、xAxysラベルのスタイルを設定する必要があります。

xAxis: {
    labels: {
        style: {
            color: 'orange',
            fontWeight: 'bold',
            'font-size': '20px'
        }
    }
}

そして、これが結果です。
もちろん、それは完璧ではありません。しかし、それは可能です。Highchartsを使用してそれを行うことが可能であり、多くのオプションと役立つ参考資料があることを示しようとしていました。