在水平栏上画出垂直线条值为2.0

我想绘制垂直线，但是直到现在都没有显示。只显示旧的水平条形图。我使用的Chart.js注释插件，仍然没有出现，并没有显示在控制台中的错误。我在某种程度上遵循这个Jsfiddle example，但不完全是这个，但如果在这个我可以在点2.0上产生垂直线？在水平栏上画出垂直线条值为2.0

var ctxViolations = document.getElementById("myChartViolations"); 
var options = { 
    scaleLabel: function(object) { 
     return "  " + object.value; 
    }, 
    responsive: true, 
    pointDot: false 
}; 

var myChartViolations = new Chart(ctxViolations, { 
type: 'horizontalBar', 

data: { 
    labels: violations_labels, 
    datasets: [{ 
      label: '# of Violations', 
      showTooltip: true, 
      data: violations_count_values, 
      backgroundColor: '#ccccff', 
      borderColor: '#000000', 
      borderWidth: 0, 
      fill: false 
     }, 
     { 
      type: 'line', 
      label: 'Excessive Violations > 3', 
      backgroundColor: '#ff0000', 
      borderColor: '#ff0000', 
      borderWidth: 0, 
      pointStyle: 'line', 
      data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3] 
     } 
    ] 
}, 
options: { 
    responsive: true, 

    scales: { 
     yAxes: [{ 
      display: true, 
      scaleLabel: { 
       display: true, 
       // labelString: 'Violation Type' 
      }, 
      ticks: { 
       beginAtZero: true, 
       fixedStepSize: 1 
      } 
     }], 
     xAxes: [{ 
      display: true, 
      scaleLabel: { 
       display: true, 
       labelString: 'Violation Count' 
      }, 
      ticks: { 
       autoSkip: false, 
      }, 
      position: 'bottom' 
     }] 
    }, 
    hover: { 
     mode: 'dataset' 
    }, 
    title: { 
     display: true, 
     text: $scope.EstablishmentName.substring(0, 25) + ' Violations' 
    }, 
    annotation: { 
     annotations: [{ 
      type: 'line', 
      mode: 'vertical', 
      scaleID: 'x-axis-0', 
      value: 2, 
      borderColor: 'green', 
      borderWidth: 3 
     }] 
    }, 

    tooltips: { 
     mode: 'label' 
    } 
} 
}); 

}); 

}

要加上3.0

来源

2017-06-12 ephemeral

@ℊααnd我分享了一张图片。我想要一个垂直线在点2.0。（简而言之，在蓝条的结尾处，但条会动态增加，我想要一条2.0的固定线）。 – ephemeral

你能提供'violation_count_values'和'violations_labels'的值吗？我试图重现该错误，但该行在那里（https://jsfiddle.net/g0v2wap5/）。只改变你发布的代码是这两个变量的随机数据，并将'annotations'上的'value'属性改为3. –

@RaquelGuimarãescan you post this as a answer？ :) – ephemeral

这行是工作JSFiddle。只更改为您发布的代码是这两个变量的随机数据，并将注释中的值属性更改为3

annotations: [{ 
      type: 'line', 
      mode: 'vertical', 
      scaleID: 'x-axis-0', 
      value: 3, // <--- 
      borderColor: 'green', 
      borderWidth: 3 
     }]

来源

2017-06-13 06:46:11

在水平栏上画出垂直线条值为2.0

回答

相关问题