在水平欄上畫出垂直線條值爲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

回答

相關問題