javascript - 値に基づいてステップ領域の色を変更する

Question

私は CanvasJS と ChartJS を使用していますが、ポイントの値に基づいて異なる色の領域を持つことが可能かどうか疑問に思っていましたか? 残りの API からグラフを作成しています

これが私のJavaScriptです：

    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: '/getdata',
        success: function (response) {
            var json = $.parseJSON(response);
            var containter = document.getElementById("chart");

            var data = [];

            json.forEach(function(item){
                var date = new Date(item.time);
                    date = ("00" + date.getHours()).slice(-2) + ":" +
                        ("00" + date.getMinutes()).slice(-2) + ":" +
                        ("00" + date.getSeconds()).slice(-2) + "." +
                        ("00" + date.getMilliseconds()).slice(-3);

                var obj = {
                    y : item.price,
                    label : date
                };

                data.push(obj);
            });

            var chart = new CanvasJS.Chart(containter,{
                axisY: {
                    title: "Price"
                },
                axisX: {
                    labelAngle: -45
                },
                data: [
                    {
                        type: "stepArea",
                        dataPoints: data
                    }
                ]
            });

            chart.render();

        }
    });

したがって、この例では、価格が 4.00 から 7.99 の範囲にある場合は緑の領域の色を持ち、価格が 8.00 から 11.99 の場合は黄色に、12 を超える場合は赤にします。

これは可能ですか？

Answer 1

次のように、Chart.js の棒グラフ (~ ステップ エリア グラフ) を拡張してこれを行うことができます。

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        this.datasets
            .filter(function (dataset) {
                // only do this for the arrays
                return typeof (dataset.fillColor) === "object";
            })
            .forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    dataset.fillColor.forEach(function (range) {
                        if (bar.value >= (range.from || -Infinity) && bar.value < (range.to || Infinity))
                            // set the bar color, the tooltip hover color and the cached (used to restore after a tooltip hover) color based on the value
                            bar.fillColor = bar.highlightFill = bar._saved.fillColor = range.fillColor;
                    })
                })
            })
    }
});

fillColorのように、チャート データには (文字列ではなく) 配列があります。

datasets: [
    {
        ...
        // sorted range with colors
        fillColor: [
            { to: 50, fillColor: "rgba(220,220,220,0.2)" },
            { from: 50, to: 75, fillColor: "rgba(220,0,0,0.2)" },
            { from: 75, to: 100, fillColor: "rgba(0,0,220,0.5)" },
            { from: 100, fillColor: "rgba(0,0,220,0.2)" },
        ],
        ...

BarAltの代わりに使用してチャートを呼び出すことを忘れないでくださいBar

---

フィドル - https://jsfiddle.net/hhybyhfw/

---