Чарт типа «Спидометр»

В данной статье мы рассмотрим как создать чарт типа «Спидометр» для визуализации выгруженных Экстрактором 1С данных.

Подробнее об Экстракторе 1С

Отметим, что чарт типа «Спидометр» на сегодняшний день можно создать только в режиме платной версии DataLens Editor.

Создаем чарт в Editor на базе выбранного датасета.

И выбираем тип «Advanced-чарт».

Далее для настройки используется программный код, который мы не будем подробно разбирать в данной статье.

Но, если интересно, здесь Вы можете ознакомиться с полным кодом:
// В модуле "Prepare" вписываем код

const params = Editor.getParams();

const loadedData = [
    { value: 3.5, fill: "#00FF00", sortIndex: 0 },
    { value: 1.0, fill: "#FFFF00", sortIndex: 1 },
    { value: 0.5, fill: "#FF0000", sortIndex: 2 }
];

const config = {
    data: loadedData,
    testData: params.testData?.[0] ?? '',
};

module.exports = {
    render: Editor.wrapFn({
        fn: function(dimensions, config) {
            const {width, height} = dimensions;

            function MetricGauge(data, options) {
                const { arcThickness, size } = Object.assign(
                    {
                    arcThickness: 14,
                    size: Math.min(width, height),
                    },
                    options
                );

                const arc = d3
                    .arc()
                    .innerRadius(size / 2 - arcThickness)
                    .outerRadius(size / 2)
                    .cornerRadius(arcThickness);

                const pie = d3
                    .pie()
                    .value(d => d.value)
                    .startAngle(-Math.PI / 1.45)
                    .endAngle(Math.PI / 1.45)
                    .sort((a, b) => d3.ascending(a.sortIndex, b.sortIndex));

                const initData = pie(JSON.parse(JSON.stringify(data)));
                const arcs = pie(data);

                const svg = d3
                    .create("svg")
                    .style('width', '100%')
                    .style('height', '100%')
                    .style('padding', '20px')
                    .attr("viewBox", [-size / 2, -size / 2, size, size]);

                const gauges = svg
                    .selectAll("path")
                    .data(arcs)
                    .enter().append("path")
                    .attr("fill", d => d.data.fill)
                    .attr("d", arc);

                // Add a dot to mark the end of the first arc
                const dot = svg
                    .selectAll("circle")
                    .data([
                    Object.assign(initData[0], {
                        startAngle: initData[0].endAngle,
                        endAngle: initData[1].startAngle,
                        stroke: initData[initData.length - 1].data.fill
                    })
                    ])
                    .enter().append("circle")
                    .attr("fill", "#000080")
                    .attr("r", arcThickness * 0.95)
                    .attr("stroke", d => d.stroke)
                    .attr("stroke-width", 0.1)
                    .attr("style", "filter: drop-shadow(2px 4px 6px rgb(0, 0, 0, 0.25));")
                    .attr("transform", d => `translate(${arc.centroid(d)})`);

                svg
                    .append("text")
                    .attr("transform", `translate(0, ${(0.1 * size) / 2})`)
                    .attr("font-size", "3.5rem")
                    .attr("text-anchor", "middle")
                    .attr("fill", data[0].fill)
                    .text(config.testData || data[0].value);

                return svg.node();
            }

            const options = ({
                // size: 225,
                arcThickness: 16,
            });

            const graph = MetricGauge(config.data, options); 

            return Editor.generateHtml(graph);
        },
        args: [config],
        libs: ['d3'],
    }),
};

// Пример настройки управление цветом
const loadedData = [
    { value: params.testData?.[0] || 3.5, fill: params.backgroundColor?.[0] || "#4caf51", sortIndex: 0 },
    { value: 1.5, fill: "#e1e8f3", sortIndex: 1 }
];

В итоге получается график такого вида. При необходимости Вы можете настроить цвет графика, также с помощью кода.