Untitled

var chart = new G2.Chart({
    container: "container",
    autoFit: true,
    height: 500,
    padding: [10, 10, 10, 0],
});

var view1;
var view2;

function DrawchartLine() {
    chart.clear();
    const data = WebCC.Properties.SensorLine;

    chart.scale("SensorName", {
        range: [0, 1],
        tickCount: 80,
        type: "cat",
    });
    chart.scale({
        range: {
            nice: true,
            sync: true,
        },
        value: {
            min: WebCC.Properties.YaxisMin,
            max: WebCC.Properties.YaxisMax,
            nice: true,
            sync: true,
            range: [0, 1],
        },
    });
    chart.axis("SensorName", {
        title: {
            text: " " + WebCC.Properties.ValueUnit,
            autoRotate: false,
            position: "middle",
            offset: 43,
            textStyle: {
                textAlign: "start", // can choose： start middle end
                fontSize: "12",
                fontWeight: "bold",
                textBaseline: "middle", // can choose: top middle bottom，default is middle
            },
        },
    });
    chart.axis("value", {
        label: {
            formatter: (text) => {
                return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
        },
    });
    chart.tooltip({
        showCrosshairs: true,
        shared: true,
    });
    chart.legend({
        position: "bottom",
        offsetX: -80,
    });

    var ds = new DataSet();

    // view2
    var dv2 = ds
        .createView()
        .source(data)
        .transform({
            type: "fold",
            fields: ["RealValue", "SetPoint"],
            key: "type",
            value: "value",
            retains: ["SensorName"],
        });
    var view2 = chart.createView({
        padding: [8, 8, 48, 64],
    });
    view2.data(dv2.rows);
    view2
        .line()
        .position("SensorName*value")
        .color("type", ["Blue", "Green"]);
    view2
        .point()
        .position("SensorName*value")
        .color("type", ["Blue", "Green"])
        .shape("circle");
    view2
        .area()
        .position("SensorName*value")
        .color("type", ["Blue", "Green"])
        .style({
            fillOpacity: 0.2,
        });

    chart.render();
}