2016-05-23 2 views
2

Я пытаюсь нарисовать линейную диаграмму, которая должна отображать линию частично сплошную и частично пунктирную (для представления реальных и ожидаемых данных). Я нашел этот пример, который прекрасно работает на версии 2.0.0-альфаChart.js: линейная диаграмма с частичной пунктирной линией

var lineChartData = { 
 
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     data: [1, 8, 3, 4, 2, 3, 4], 
 
     borderColor: '#66f', 
 
     borderDash: [20, 30], 
 
     pointBackgroundColor: "transparent" 
 
    },{ 
 
     label: "My First dataset", 
 
     data: [1, 8, 3, 4, 2, , ], 
 
     borderColor: '#66f', 
 
     pointBackgroundColor: "transparent" 
 
    }] 
 
}; 
 

 
var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: "line", 
 
    data: lineChartData, 
 
    options: { 
 
     elements: { 
 
      line: { 
 
       fill: false 
 
      } 
 
     } 
 
    } 
 
});
<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script> 
 
<canvas id="chart"/>

Но когда я запускаю тот же код с текущей версии 2.1.3 линии не перекрываются правильно (между точками D и E):

var lineChartData = { 
 
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     data: [1, 8, 3, 4, 2, 3, 4], 
 
     borderColor: '#66f', 
 
     borderDash: [20, 30], 
 
     pointBackgroundColor: "transparent" 
 
    },{ 
 
     label: "My First dataset", 
 
     data: [1, 8, 3, 4, 2, , ], 
 
     borderColor: '#66f', 
 
     pointBackgroundColor: "transparent" 
 
    }] 
 
}; 
 

 
var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: "line", 
 
    data: lineChartData, 
 
    options: { 
 
     elements: { 
 
      line: { 
 
       fill: false 
 
      } 
 
     } 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 
 
<canvas id="chart"/>

К сожалению, я не могу использовать альфа-версию из-за других ошибок, которые разрешены в текущей версии. Любой способ репликации графика в первом фрагменте с версией выпуска?

+0

что, если вы добавите все данные, чтобы пунктирные к ... – vaso123

+0

@lolka_bolka пунктирной линии уже имеют все точки данных, но это не правильно пересекаться и вы можете увидеть его часть позади сплошная линия –

ответ

3

Одним из решений может быть: установить значения набора данных (1) в значение null, если оно не отображается. Эта строка не создает кривую Безье, это неудобство.

Пример:

var lineChartData = { 
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], 
datasets: [{ 
    label: "My First dataset", 
    data: [, , , , 2, 3, 4], 
    borderColor: '#66f', 
    borderDash: [20, 30], 
    pointBackgroundColor: "transparent" 
},{ 
    label: "My First dataset", 
    data: [1, 8, 3, 4, 2, , ], 
    borderColor: '#66f', 
    pointBackgroundColor: "transparent" 
}] 

};

https://jsfiddle.net/scs_3/8qqv69ot/

Смежные вопросы