ChartJS用于将Point定位到条形图(范围)的搜索图表类型

我正在尝试将excel制作的这个图表迁移到chartJS中：

重要特性：

具有显示范围的水平条
假设范围从"下限"（0%）到"上限"（100%）
中位数用垂直线表示（50%）
在范围的某处放置一个单点（例如，23%）
这里只有一个点是动态的，其他的看起来都一样

我知道这不是一个典型的图表，有点特殊。
我找到的最接近的图表是：（一）

一个简单的堆叠条形图取代了明亮明显的星星，我只是另一个条形堆叠
不是很漂亮一样的
好坏参半的图表
使用注解插件画一条线（这里我用画图工具手工画线）
在css中，整个图表需要旋转90 °（已在下图中完成）

另一个选择是使用plane css的东西来创建它，但是我更愿意使用chart js，因为有更多的图表，我所有的框架都是为它设计的。
任何建议都很感谢。谢谢。

charts.js允许您使用简单的机制访问画布并绘制自定义内容。
我们可以从条形图开始，比如一个水平条形图，其中一个项目和大多数其他项目都被禁用：

const data = {
    labels: [""],
    datasets: [{
        label: '100%',
        data: [100],
        backgroundColor: '#4af',
        barThickness: 100
    }]
};
const options = {
    type: 'bar',
    data,
    options: {
        animation: {duration: 0},
        indexAxis: 'y',
        layout: {
            padding:{
                left: 10,
                right: 10
            }
        },
        scales: {
            x: {
                display: false
            },
            y: {
                display: false
            }
        },
        
        plugins: {
            legend: {
                display: false
            },
            tooltip:{
                enabled: false
            }
        }
    }
};

const chart = new Chart(document.getElementById("myChart"), options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<body>
<canvas id="myChart" style="height:250px; width: 90vw; border: 1px solid #ddd "></canvas>

</body>

现在我们可以通过插件访问画布，绘制所有其他内容：

const plugin = {
    id: 'customDraw',  // to identify the plugin in the chart options
    afterDraw: (chart, args, options) => {
        const {ctx} = chart;
        // read plugin options
        const lineWidth = options.lineWidth || 1,
            lineColor = options.lineColor || '#000',
            textColor = options.textColor || '#000',
            textFont = options.textFont,
            starAt = options.starAt,
            starColor = options.starColor || '#f44';
        // get pixel coordinates for our bar, that is
        // positioned at y = 0, from x = 0 to x = 100
        const yCenter = chart.scales.y.getPixelForValue(0),
            yTop = yCenter-50,
            yBottom = yCenter+50,
            x0 = chart.scales.x.getPixelForValue(0),
            x50 = chart.scales.x.getPixelForValue(50),
            x100 = chart.scales.x.getPixelForValue(100),
            xStar = chart.scales.x.getPixelForValue(starAt);
        ctx.save();
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctx.beginPath();
        ctx.moveTo(x50, yTop);
        ctx.lineTo(x50, yBottom);
        ctx.stroke();

        ctx.fillStyle = starColor;
        drawStar(ctx, xStar, yCenter, 10);

        ctx.textBaseline = "top";

        ctx.fillStyle = textColor;
        if(textFont){
            ctx.font = textFont;
        }

        ctx.textAlign = "start";
        ctx.fillText("Lower", x0, yBottom + 2);
        ctx.textAlign = "center";
        ctx.fillText("Median", x50, yBottom + 2);
        ctx.textAlign = "right";
        ctx.fillText("Upper", x100, yBottom + 2);

        ctx.restore();
    }
};

完整代码：
一个三个三个一个
下一步将是添加自定义交互-工具提示，点击事件和一切...

ChartJS用于将Point定位到条形图(范围)的搜索图表类型

1条答案

相关问题

热门标签

最新问答