그림 JS - 데이터 포인트마다 다른 색상

그림 JS - 데이터 포인트마다 다른 색상

꺽은선형 차트의 데이터 포인트가 특정 값보다 클 경우 다른 색상을 설정하는 방법이 있습니까?

이 dxChart의 예는 https://stackoverflow.com/a/24928967/949195입니다.이 예에서는 Chart와 비슷한 것을 찾고 있습니다.JS

ChartJs 버전 2.2.2로 업데이트한 결과, 더 이상 수용된 답변이 작동하지 않는 것을 알게 되었습니다.데이터 집합은 속성의 스타일 정보를 유지하는 어레이를 사용합니다.이 경우:

var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: pointBackgroundColors
            }
        ]
    }
});

for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
    if (myChart.data.datasets[0].data[i] > 100) {
        pointBackgroundColors.push("#90cd8a");
    } else {
        pointBackgroundColors.push("#f58368");
    }
}

myChart.update();

이것을 ChartJs의 샘플에서 찾았습니다.특히 이 샘플은 "다른 포인트사이즈 예시"입니다.

의 최신 버전 사용chart.js스크립트 가능한 옵션을 사용하여 이 작업을 수행할 것을 권장합니다.

스크립트 가능 옵션을 사용하면 제공하는 기능에 따라 데이터 세트 속성(예: 선점 색상)의 스타일을 동적으로 변경할 수 있습니다.함수에 점의 색인 및 값 등을 알려주는 '콘텍스트' 개체가 전달됩니다(아래 참조).

대부분의 차트 속성은 스크립팅할 수 있습니다. 각 차트 유형의 데이터 집합 속성을 통해 정확한 목록을 알 수 있습니다(예: 꺽은선형 차트는 여기를 참조하십시오).

다음으로 꺽은선형 차트에서 스크립트 가능 옵션을 사용하는 방법을 나타냅니다(도서의 예에 따라).이 차트에서 음의 데이터 포인트는 빨간색으로 표시되고 양의 데이터 포인트는 파란색/녹색 번갈아 표시됩니다.

window.myChart = Chart.Line(ctx, {
    data: {
        labels: x_data,
        datasets: [
            {
                data: y_data,
                label: "Test Data",
                borderColor: "#3e95cd",
                fill: false,
                pointBackgroundColor: function(context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    return value < 0 ? 'red' :  // draw negative values in red
                        index % 2 ? 'blue' :    // else, alternate values in blue and green
                            'green';
                }
            }
        ],
    }
});

그context함수에 전달된 개체는 다음과 같은 속성을 가질 수 있습니다.이들 중 일부는 특정 유형의 엔티티에는 존재하지 않으므로 사용하기 전에 테스트하십시오.

• 차트: 연관된 차트
• dataIndex: 현재 데이터의 인덱스
• 데이터 세트: 인덱스 데이터 세트의 데이터 세트색인
• datasetIndex: 현재 데이터 세트의 인덱스
• hover: hold이면 true

여기에서는 (v 2.7.0)이 유효합니다.먼저 데이터 세트의 pointBackgroundColor와 pointBorderColor를 어레이로 설정해야 합니다(원하는 경우 이 어레이를 색상으로 채울 수 있습니다).

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: [],
                pointBorderColor: [],
            }
        ]
    }
});

그런 다음 포인트의 색상을 직접 사용할 수 있습니다.

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

포인트를 구별하기 위해 플레이하는 기타 속성: pointStrokeColor (존재하지만 기능을 할 수 없는 것 같음), pointRadius & pointHoverRadius(정수), pointStyle('triangle', 'rectRot', 'cross', 'crossRot', 'star', 'line' 및 'dash')은 알 수 없지만 pointRadius 및 PointStyle의 기본값을 알 수 없습니다.

chartjs 2.0에 대해서는 다음 답변을 참조하십시오.

원래의 답변은 다음과 같습니다.

---

ChartJs에 관한 좋은 질문입니다.저도 같은 작업을 하고 싶었습니다. 즉, 포인트 색상을 동적으로 다른 색으로 변경하는 것입니다.아래에서 이것을 시도해 보셨나요?방금 해봤는데 효과가 있었어요.

이것을 시험해 보세요.

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ; 

또는 다음을 시도해 보십시오.

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

또는 이것까지:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

다음 작업을 수행합니다.

myLineChart.update();

뭐 이런 거 하나 가져도 될 것 같아요.

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

어쨌든 한번 해봐.

새로운 2.0 버전에서 나에게 효과가 있었던 것을 추가했을 뿐입니다.

대신:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

다음을 사용해야 했습니다.

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

2.0의 변경 때문인지 꺽은선형 차트가 아닌 막대형 차트를 사용 중인지 확실하지 않습니다.

이 방법으로 myChart를 초기화하면

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

이 코드로 라인 색상을 변경해야 합니다.

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

---

이 방법으로 myChart를 초기화하면

myBar = new Chart(ctx).Line(barChartData, {

이 코드로 라인 색상을 변경해야 합니다.

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

언급URL : https://stackoverflow.com/questions/28159595/chartjs-different-color-per-data-point