Question

我正在使用Chart.js，我将创建一个小条形图。如何在y轴上绘制红线（不创建新的数据集）在任何点上，如图片？

在不同类型的图表中创建此行并不是问题，但在条形图中我找不到任何解决方案。

我的代码：

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="../Chart.js"></script>
    </head>
    <body>
        <div style="width: 50%">
            <canvas id="canvas" height="450" width="600"></canvas>
        </div>


    <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*70)};

    var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];

    var barChartData = {
        labels : orders,
        datasets : [
            {
                label: "Order",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
            }
        ]

    }



    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");

        var chart = new Chart(ctx).Bar(barChartData, {
            responsive : true,
            animation: true,
            barValueSpacing : 5,
            barDatasetSpacing : 1,
            tooltipFillColor: "rgba(0,0,0,0.8)",                
        //  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
            tooltipTemplate: function(valuesObject){
                console.log(valuesObject);
                // do different things here based on whatever you want;

                var label = valuesObject.label
                var objLen = label.length;
                // 111-1
                var string = label.substring(0,objLen-2);

                console.log(string);

                return "Order nr: " + string;
                }           


            });

Answer 1

要添加红线，您需要扩展默认条形图并将红线添加到特定位置。这是将红线添加到条形图的代码。您只需要计算需要添加红线的位置。

这是完整的HTML

＆＃13;

<!doctype html>
	<html>
		<head>
			<title>Bar Chart</title>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
		</head>
		<body>
			<div style="width: 50%">
				<canvas id="canvas" height="450" width="600"></canvas>
			</div>


		<script type="text/javascript">
		var randomScalingFactor = function(){ return Math.round(Math.random()*70)};

		var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];

		var barChartData = {
			labels : orders,
			datasets : [
				{
					label: "Order",
					fillColor: "rgba(151,187,205,0.5)",
					strokeColor: "rgba(151,187,205,0.8)",
					highlightFill: "rgba(151,187,205,0.75)",
					highlightStroke: "rgba(151,187,205,1)",
					data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
				}
			]

		}



		window.onload = function(){
			var ctx = document.getElementById("canvas").getContext("2d");
			

			// Notice now we're extending the particular Bar chart type, rather than the base class.
			Chart.types.Bar.extend({
				// Passing in a name registers this chart in the Chart namespace in the same way
				name: "BarAlt",
				initialize: function(data){
					console.log('Bar chart extension to add red line');
					Chart.types.Bar.prototype.initialize.apply(this, arguments);
				},
				draw: function() {
					Chart.types.Bar.prototype.draw.apply(this, arguments);
					this.chart.ctx.beginPath();
					this.chart.ctx.beginPath();
					this.chart.ctx.moveTo(25, 50);
					this.chart.ctx.lineTo(1000,50);
					this.chart.ctx.strokeStyle="red";
					this.chart.ctx.stroke();	
				}
			});

			var chart = new Chart(ctx).BarAlt(barChartData, {
				responsive : true,
				animation: true,
				barValueSpacing : 5,
				barDatasetSpacing : 1,
				tooltipFillColor: "rgba(0,0,0,0.8)",                
			//  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
				tooltipTemplate: function(valuesObject){
					console.log(valuesObject);
					// do different things here based on whatever you want;

					var label = valuesObject.label
					var objLen = label.length;
					// 111-1
					var string = label.substring(0,objLen-2);

					console.log(string);

					return "Order nr: " + string;
					}           


				});
		}
			</script>
		</body>
		
		</html>

＆＃13;

在Chart.js栏上画线

1 个答案: